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 s

<div class="fader two">

That seems to work nicely...

代码似乎相当合法。

Image Rotator不会隐藏第二个实例上的最后一个图像

2 个答案: