Javascript jquery来回滑动或循环滑动
请我需要帮助滑动图像使用jquery来回,或只是去周围。现在它滑到了最后一个元素,又回到了第一个div,又开始了,一点也不漂亮,我知道我应该调用一个函数来实现这一点,但我总是出错。提前感谢,下面是我的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
$(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');
});
}