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

So far I have got jCarousel to display, and load the images via a txt file,

到目前为止,我已经有jCarousel显示,并通过txt文件加载图像,

What I want to do is show 4 images at a time, then when the user puts the mouse over 1 of the images the other 3 images to fade opacity, to 30%. Then if they move the mouse to the image next to it I want that image to be 100% opacity and the other 3 images 30% opacity.

我想要做的是一次显示4个图像,然后当用户将鼠标放在其中一个图像上时,其他3个图像将不透明度降低到30%。然后,如果他们将鼠标移动到旁边的图像,我希望该图像为100%不透明度,其他3个图像为30%不透明度。

So the image with the mouse over it will always be 100% opacity, and the others 30%, so it stands out. When the user moves the mouse out of the jCarousel box I want all images to show 100% opacity.

所以用鼠标在它上面的图像总是100%不透明,其他30%,所以它很突出。当用户将鼠标移出jCarousel框时,我希望所有图像都显示100%不透明度。

I'm using code similar to this

我正在使用与此类似的代码

Thanks.

Edit

Sorry I should have added code before, here it is: http://pastebin.com/m54cd73d8 This is what I have so far nickrance.co.uk/jcarousel/dynamic_ajax.html It kind of works, it fades the inactive images, but I think it needs a mouseout event to restore the opacity of all images when the mouse moves out of the jCarousel div. Also, it seems to be only working for the first 4 images, and I have 10 images in the carousel, the others don't seem to do anything :s

对不起我以前应该添加代码,这里是:http://pastebin.com/m54cd73d8这是我到目前为止nickrance.co.uk/jcarousel/dynamic_ajax.html它有点工作,它淡化非活动图像,但我认为当鼠标离开jCarousel div时,需要一个mouseout事件来恢复所有图像的不透明度。此外,它似乎只适用于前4个图像,我在旋转木马上有10个图像,其他图像似乎没有做任何事情:s

New Current code: So far

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



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

1 个解决方案

#1

You can add this code to yours and you will be fine:

您可以将此代码添加到您的代码中,您将没事:

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

And your HTML must be something like this:

你的HTML必须是这样的:

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

Then all images will fade opacity to 1 when mouse leave your carousel...

当鼠标离开你的旋转木马时,所有图像都会将不透明度淡化为1 ...

#1