Question

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

这是一个简单的小提示，显示当前的非工作代码。

目前它会导致所有项目开始旋转 - 如何更新我的代码以仅对正在悬停的项目起作用...

（+强制复制和粘贴以保持堆栈溢出快乐...）

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

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

1 个答案: