Question

我有以下幻灯片代码：

HTML

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

});

它在所有其他浏览器中都运行正常，但在谷歌浏览器中它只会触发一次。

Answer 1

这是一个有效的答案，我不知道为什么chrome比setInterval更喜欢setTimeout，但确实如此。我也使用.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/

setInterval在Chrome中运行一次，但在其他浏览器中运行良好

1 个答案: