javascript - 图像旋转器不会隐藏第二个实例上的最后一个图像

Question

第一个实例效果很好，但第二个实例不会隐藏以前的图像。这里还有什么可以改进的性能吗？

演示

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

Answer 1

你真的可以用更少的代码做到这一点，还建议你使用 CSS 过渡来利用硬件加速，而不是过多地依赖 jQuery 函数。

看看我的例子：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);

})();

Answer 2

我添加了这个CSS：

.fader.two {
    display: none;
}

而这堂课是其中的.fader一个

<div class="fader two">

这似乎工作得很好......

代码似乎相当合法。