jCarousel问题-悬停图像不透明度设置

Question

到目前为止，我已经展示了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张图片，其他图片似乎什么也没做：

新的当前代码：到目前为止

 
$(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);
     });
});
  

Answer 1

您可以将此代码添加到您的代码中，这样就可以了：

$(".jcarousel-wrapper").on('mouseleave', function(){
    $(thumbs).fadeTo(fadeTime, 1.0);
});

而且您的HTML必须是这样的：

<div class="jcarousel-wrapper">
   <div class="jcarousel">
       <ul id="mycarousel">
            <li>...

然后，当鼠标离开转盘时，所有图像的不透明度都将变为1。