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

Question

我正在尝试用 jQuery 制作一个无限旋转的 imagereel。该图像卷以 5000 毫秒的间隔在图像之间切换，然后淡出“旧”图像并淡入“新”图像。要显示的图像具有“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"

Answer 2

如果您用类显式标记图像，它可能会工作得更好：

function switchImage(){

  var selector = $('#fotoreel img.current');
  var nextOne = $(selector).length ? $(selector).next();
  if($(nextOne).length == 0)
  {
    var nextOne = $('#fotoreel img:first');
  }
  $(selector).fadeOut('normal',function() {
    $(selector).removeClass('current');
    $(nextOne).addClass('current').fadeIn('normal');
  });
  setTimeout(switchImage, 5000);
}

$(document).ready(function(){
  $('#fortoreel img:last-child').addClass('current');
  setTimeout(switchImage,5000);
});

另请注意，在我对“setTimeout()”的调用中，我传递了对该函数的直接引用，而不是调用它的代码的字符串版本。

Answer 3

这不起作用，因为您提到的浏览器不喜欢您使用的 display: inline 选择器。

我使用以下方法让它工作：

function switchImage() {
    var selector = $('#fotoreel img:visible');
    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);
});