0

次のスライドショー コードがあります。

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

});

他のすべてのブラウザでは正常に動作していますが、Google Chrome では 1 回だけ起動します。

4

1 に答える 1

0

これは実用的な答えです.chromeがsetTimeoutよりもsetIntervalを好む理由はわかりませんが、そうです。.fadeIn と .fadeOut の代わりに .animate も使用します。

$(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/
于 2013-03-31T00:16:21.907 に答える