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（）再次调用该函数，但这似乎不起作用。

修改的

好的，谢谢大家！如此快速响应，真棒！

我使用的解决方案是添加一个类并搜索它而不是样式。显示：内联似乎没有问题，因为它已经解决了，但是所有的浏览器似乎都以不同的方式实现了jQuery fadeIn（）函数。

我想在“display：inline;”上完全过滤，因为这些空格是在Chrome中添加的，而不是在IE，FF或Opera中添加的。所以这意味着样式属性根本没有准确过滤。愚蠢的我！：）

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

谢谢大家的回答，我喜欢这个地方！：d

Answer 1

这很可能是因为您正在检查样式属性，这在浏览器中非常不一致。 I.E.根本不起作用或与不同数量的空白区域一起工作。只需简化您的选择器即可使用班级或":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

这不起作用，因为您提到的浏览器不喜欢显示：您使用的内联选择器。

我使用以下方法开始工作：

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

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

3 个答案: