javascript - 不同浏览器中的无限js循环

Question

我正在尝试用 jQuery 制作一个无限旋转的 imagereel。该图像卷以 5000 毫秒的间隔在图像之间切换，然后淡出“旧”图像并淡入"new"图像。要显示的图像的样式属性为“display:inline”。

代码如下:

function switchImage(){

    var selector = $('#fotoreel img[style="display: inline; "]');
    var nextOne = $(selector).next();
    if($(nextOne).length == 0)
    {
        var nextOne = $('#fotoreel img:first');
    }
    $(selector).fadeOut('normal',function(){
        $(nextOne).fadeIn('normal');
    });
    var t = setTimeout("switchImage()",5000);
}

$(document).ready(function(){
    setTimeout("switchImage()",5000);
});

问题是它在 Chrome 中工作正常，但在 Firefox 和 Opera 中它只移动图像一次。在 IE 中情况更糟；在那里它根本不起作用。

你们知道用 javascript 无限循环的更好方法吗？现在我使用 setTimeout() 再次调用该函数，但这似乎不起作用。

编辑

好的，谢谢大家!回复这么快，太棒了!

我使用的解决方案是添加一个类并搜索它而不是搜索样式。正如它所解决的那样，display:inline 似乎不是问题，但所有浏览器似乎都以不同的方式实现 jQuery fadeIn() 函数。

我想精确过滤“display: inline ;”，因为空格是在 Chrome 中添加的，但在 IE、FF 或 Opera 中没有添加。因此，这意味着样式属性根本无法准确地进行过滤。愚蠢的我! :)

我确保将一个类添加到当前显示的图像中，并通过过滤该类来查找下一个类。现在它就像一个魅力。

谢谢大家的回答，我喜欢这个地方! :D

Answer 1

这很可能是因为您正在检查样式属性，这在浏览器中非常不一致。 IE。根本不起作用或者适用于不同数量的空白。只需简化您的选择器以使用类或 ":visible"