jquery - 悬停时按间隔旋转图像 - 仅影响悬停在其上的项目

Question

我有一个简单的图像旋转器 - 我想在页面上的多个项目上使用

这是一个简单的 fiddle ，显示当前不起作用的代码。

目前它会导致所有项目开始旋转 - 我如何更新我的代码以仅适用于悬停在其上的项目...

http://jsfiddle.net/tpt6kx3q/

(+强制复制和粘贴以保持堆栈溢出正常...)

    $(document).ready(function () {

        jQuery('.image-hover').hover(function () {

            flicker = setInterval(function () {
                if (jQuery('img.active').length > 0) {
                    jQuery('img.active').removeClass('active').next('img').addClass('active');
                } else {
                    jQuery('img:first-child').addClass('active');
                }
            }, 500);
        }, function () {
            clearInterval(flicker);
            jQuery('img').removeClass('active');
        });

    });

Answer 1

对于仅旋转悬停元素的图像，您应该...仅旋转此元素图像。

还有两件事需要修复:

• 您有两个非闭合 a 标记。
• 元素 ID 必须是唯一的。使用 class="flicker" 而不是 id="flicker"

Updated fiddle .

$(document).ready(function()
{
    var flicker = 0;    

    $('.image-hover').hover(function()
    {
        var thisEl = $(this);
        flicker = setInterval(function()
        {
            var activeImages = thisEl.find('img.active');
            if (activeImages.length > 0)
            {
                activeImages.removeClass('active').next('img').addClass('active');
            }
            else
            {
                thisEl.find('img:first').addClass('active');
            }
        }, 500);
    },
    function()
    {
        clearInterval(flicker);
        $(this).find('img.active').removeClass('active');
    });  
});