1

最初のインスタンスはうまく機能しますが、2 番目のインスタンスは前の画像を隠しません。また、パフォーマンスのために改善できるものはありますか?

デモ


$(function() {
    $('.fader img:not(:first)').hide();
    $('.fader img').css('position', 'absolute');
    $('.fader img').css('top', '0px');
    $('.fader img').css('left', '50%');
    $('.fader img').each(function() {
        var img = $(this);
        $('').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -this.width / 2 + 'px');
        });
    });

    var pause = false;

    function fadeNext() {
        $('.fader img').first().fadeOut().appendTo($('.fader'));
        $('.fader img').first().fadeIn();
    }

    function fadePrev() {
        $('.fader img').first().fadeOut();
        $('.fader img').last().prependTo($('.fader')).fadeIn();
    }

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 2000);
});
4

2 に答える 2

1

これは実際にははるかに少ないコードで実行できます。jQuery 関数にあまり依存するのではなく、CSS トランジションを使用してハードウェア アクセラレーションを利用することもお勧めします。

私の例を見てください: http://jsfiddle.net/CUJAZ/

(function() {

    'use strict';

    var currentSlide = 0;
    var $slides = jQuery('.slideshow img');

    var slideTo = function ( targetIndex ) {

        $slides.removeClass('show');
        $slides.eq(targetIndex).addClass('show');

        currentSlide = targetIndex;
    };

    var prevSlide = function () {

        if( currentSlide === 0 ) {
            return;
        }

        slideTo(currentSlide - 1);
    };

    var nextSlide = function () {

        if( currentSlide >= $slides.length - 1 ) {
            return;
        }

        slideTo(currentSlide + 1);
    };

    slideTo(0);
    var timer = window.setInterval(nextSlide, 2000);

})();
于 2013-10-02T23:52:45.857 に答える
0

このcssを追加しました：

.fader.two {
    display: none;
}

そして、このクラスは.faders の1 つに

<div class="fader two">

それはうまくいくようです...

コードはかなり合法のようです。

于 2013-10-02T23:30:35.593 に答える