jQuery幻灯片来回滑动或循环滑动

Question

jQuery幻灯片来回滑动或循环滑动

3

请帮我使用jQuery来实现图片的前后滑动或者循环轮播。目前它只会在滑动到最后一个元素后，立刻返回到第一个div并重新开始，这看上去并不美观。我知道我应该调用一个函数来处理这个问题，但我一直犯错。谢谢您的帮助！下面是我的jQuery代码：

$(document).ready(function() {
    var currentPosition = 0;
    var slideWidth = 190;
    var slides = $('.slider_move');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 5000;

    slideShowInterval = setInterval(changePosition, speed);                 
    slides.wrapAll('<div id="slidesHolder"></div>')                 
    slides.css({ 'float' : 'left' });                   
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);  

    function changePosition() {
        if(currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }                   
    function moveSlide() {
            $('#slidesHolder')
              .animate({'marginLeft' : slideWidth*(-currentPosition)});
    }
});

- job kwemoi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blazemonger · Accepted Answer

改为：

if(currentPosition == numberOfSlides - 1) {
    currentPosition = 0;
} else {
    currentPosition++;
}

您需要将第一张幻灯片移到最后（同时调整容器的位置）:

if (currentPosition > 0) {
    $('#slidesHolder').css('marginLeft',0)
        .children().first().appendTo('#slidesHolder');
} else {
    currentPosition += 1;
}

http://jsfiddle.net/mblase75/qatry/

或者，为了进一步优化整个过程，您可以消除currentPosition变量和moveSlide子函数，并在.animate方法中使用回调函数：

function changePosition() {
    $('#slidesHolder').animate({
        'marginLeft': 0-slideWidth
    }, function() {
        $('#slidesHolder').css('marginLeft', 0)
            .children().first().appendTo('#slidesHolder');
    });
}

http://jsfiddle.net/mblase75/8vaCg/