我需要帮助使用 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)});
}
});
最佳答案
代替:
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');
});
}
关于javascript - jquery来回滑动或滑动圆形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12162264/