到目前为止,我已经让 jCarousel 显示,并通过 txt 文件加载图像,
我想要做的是一次显示 4 个图像,然后当用户将鼠标放在其中 1 个图像上时,其他 3 个图像将不透明度淡化到 30%。然后,如果他们将鼠标移动到它旁边的图像上,我希望该图像为 100% 不透明度,而其他 3 个图像为 30% 不透明度。
所以鼠标悬停的图像总是 100% 的不透明度,其他的都是 30%,所以它很突出。当用户将鼠标移出 jCarousel 框时,我希望所有图像都显示 100% 的不透明度。
我正在使用与此类似的代码
谢谢。
编辑
抱歉,我之前应该添加代码,这里是:http : //pastebin.com/m54cd73d8 这是我到目前为止所拥有的 nickrance.co.uk/jcarousel/dynamic_ajax.html 它有点工作,它淡化了不活动的图像,但我认为当鼠标移出 jCarousel div 时,它需要一个 mouseout 事件来恢复所有图像的不透明度。此外,它似乎只适用于前 4 张图片,我在轮播中有 10 张图片,其他的似乎没有做任何事情:s
新当前代码: 到目前为止
$(window).bind("load", function() {
var activeOpacity = 1.0,
inactiveOpacity = 0.3,
testOpacity = 0.3,
fadeTime = 50,
clickedClass = "selected",
thumbs = "#mycarousel li";
$(thumbs).fadeTo(1.0, activeOpacity);
$(thumbs).hover(
function(){
$(thumbs).fadeTo(fadeTime, inactiveOpacity);
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, activeOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs + '.' + clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});