Javascript jquery来回滑动或循环滑动

Javascript jquery来回滑动或循环滑动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,请我需要帮助滑动图像使用jquery来回,或只是去周围。现在它滑到了最后一个元素,又回到了第一个div,又开始了,一点也不漂亮,我知道我应该调用一个函数来实现这一点,但我总是出错。提前感谢,下面是我的jquery代码 $(document).ready(function() { var currentPosition = 0; var slideWidth = 190; var slides = $('.slider_move'); var numberOfSli

请我需要帮助滑动图像使用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)});
    }
});​
$(文档).ready(函数(){
var currentPosition=0;
var slideWidth=190;
var slides=$('.slider_move');
var numberOfSlides=slides.length;
var幻灯片放映间隔;
var速度=5000;
slideShowInterval=设置间隔(改变位置、速度);
幻灯片。wrapAll(“”)
css({'float':'left'});
$(“#幻灯片文件夹”).css('width',slideWidth*numberOfSlides);
函数changePosition(){
如果(currentPosition==numberOfSlides-1){
currentPosition=0;
}否则{
currentPosition++;
}
moveSlide();
}                   
函数moveSlide(){
$(“#幻灯片播放器”)
.animate({'marginLeft':slideWidth*(-currentPosition)});
}
});​
而不是:

if(currentPosition == numberOfSlides - 1) {
    currentPosition = 0;
} else {
    currentPosition++;
}
您需要将第一个滑块移动到最末端(同时调整容器的位置):

或者,为了进一步优化整个过程,您可以消除
currentPosition
变量和
moveSlide
子函数,只需在
方法中使用回调即可

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

不起作用——第一张幻灯片总是一样的,你需要删除它,然后附加它。Blazemonger仍然不起作用,这是我在页脚附近做的,我只需要它们滑到最后,然后再滑回来,或者在没有任何提示的情况下四处走动stopping@Blazemonger非常感谢,它很有效,我知道如何使用append,应该多练习!祝你有美好的一天!
function changePosition() {
    $('#slidesHolder').animate({
        'marginLeft': 0-slideWidth
    }, function() {
        $('#slidesHolder').css('marginLeft', 0)
            .children().first().appendTo('#slidesHolder');
    });
}