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

【问题标题】：jCarousel issue - Hover images opacity settingsjCarousel 问题 - 悬停图像不透明度设置
【发布时间】：2015-02-18 08:24:58
【问题描述】：

到目前为止，我已经让 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);
     });
});

【问题讨论】：

我们需要查看您的确切代码。发布它或不要指望能解决您的问题的答案。
已添加代码 - pastebin.com/m54cd73d8 抱歉之前应该添加它！谢谢。

标签： javascript jquery jcarousel

【解决方案1】：

您可以将此代码添加到您的代码中，您会没事的：

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

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

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

然后当鼠标离开你的轮播时，所有图像的不透明度都会降低到 1...

【讨论】：