jquery前后滑动或滑动 [英] jquery slide back and forth or slide round

问题描述

请使用jquery来回滚动图片，或者只是为了转动。现在它滑动到最后一个元素，并冲回到第一个div，再次开始，不是很漂亮，我知道我应该回调一个函数来做，但我不断犯错误。感谢提前，这是我的jquery代码

Please i need help sliding images using jquery back and forth, or just to go round. right now it slides upto the last element and rushes back to the first div and begins again, not beautiful at all,i know i should call back a function to do that but i keep getting mistakes. thanks in advance, this is my jquery code below

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

推荐答案

代替：

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

您需要将第一张幻灯片移动到最后的容器）：

You need to move the first slide to the very end (and adjust the position of the container at the same time):

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

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

或者，为了优化整个事情，你可以消除 currentPosition 变量和 moveSlide 子函数，只需在 .animate 方法：

Or, to optimize the whole thing a little more, you can eliminate the currentPosition variable and the moveSlide sub-function, and just use a callback in the .animate method:

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

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

这篇关于jquery前后滑动或滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！