setInterval在Chrome中工作一次，但在其他浏览器中很好

setInterval is working once in Chrome but fine in other browsers

本文关键字：其他 浏览器 一次 很好 工作 Chrome setInterval      更新时间：2023-09-26

我有以下幻灯片代码:

<div id="slideshow"><img src="common/images/background/Slide1b.jpg" />
   <img src="common/images/background/Slide2b.jpg" />
   <img src="common/images/background/Slide3b.jpg" />
   <img src="common/images/background/Slide4b.jpg" />
</div>
jQuery

var opt1 = 1;
$(document).ready(function() {
    $('#slideshow').supersize();
    all_images = $('#slideshow > img');
    all_images.hide();
    first = $('#slideshow > img:eq(0)');
    first.show().attr('class', 'power');
    setInterval(function() { 
        var total = $('#slideshow > img').length;
            if(opt1 < total) {
                var current = $('.power');
                var next = $('.power').next();              
                current.removeClass('power').fadeOut('slow');
                next.fadeIn('slow').addClass('power');
                ++opt1;
            } else {
                opt1 = 1;
                all_images.removeClass('power').fadeOut('slow');
                first.addClass('power').fadeIn('slow');             
            }
    }, 2000);       
});

它在所有其他浏览器中工作良好，除了在Google Chrome它只触发一次。

这是一个工作的答案，我不知道为什么chrome喜欢setTimeout比setInterval好，但它确实。我还使用。animate代替。fadein和。fadeout。

$(document).ready(function()
{
    $('#slideshow').supersize();
    var images = $('#slideshow>img');
    images.css('opacity', 0)
    var first = images.eq(0);
    first.css('opacity', 1).addClass('power');
    setTimeout(on_timer, 2000);
    function on_timer()
    {
       var current = $('.power');
       var next = $('.power').next();       
       if (next.length == 0)
          next = first;
       current.removeClass('power').animate({opacity: 0}, 1000);
       next.css('opacity', 0).animate({opacity: 1}, 1000).addClass('power');
       setTimeout(on_timer, 2000);
    }
});
在

演示

http://62.168.145.82/slideshow/
相关文章：