jquery前后滑动或滑动

本文介绍了jquery前后滑动或滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

请使用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; }

jsfiddle/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'); }); }

jsfiddle/mblase75/8vaCg/