Javascript 无限水平滑块显示多张幻灯片,悬停时暂停动画
我试图制作一个从右向左滑动的无限滑块,一次显示4张幻灯片。我的意思是无限,比如当幻灯片1被隐藏时,它会移动到最后一张幻灯片旁边的末尾 这是我的html:Javascript 无限水平滑块显示多张幻灯片,悬停时暂停动画,javascript,jquery,html,slider,jquery-animate,Javascript,Jquery,Html,Slider,Jquery Animate,我试图制作一个从右向左滑动的无限滑块,一次显示4张幻灯片。我的意思是无限,比如当幻灯片1被隐藏时,它会移动到最后一张幻灯片旁边的末尾 这是我的html: <div id="slider"> <div class="slide">slide 1</div> <div class="slide">slide 2</div> ... up to slide 6 </div> 每张幻灯片都包含带有背景图像的
<div id="slider">
<div class="slide">slide 1</div>
<div class="slide">slide 2</div>
... up to slide 6
</div>
每张幻灯片都包含带有背景图像的文本。这就是我现在所拥有的一切,滑动是丑陋的。我还想设置我想用jquery显示多少,这样我就不必编辑我的css,我还想集成一些东西,比如当你在滑块上悬停时的暂停。请帮忙,谢谢。我想你对如何完成这项工作有个好主意。但是您的代码需要更正 您正在为所有的
”设置动画。幻灯片“
”,因为它们都是内联的,所以您只需为第一张幻灯片设置动画,之后的所有内容都将紧随其后:
$('.slide').first().animate({marginLeft:-$('.slide').width()});
同时你也在制作动画和移动它。只需在动画完成后移动它
$('.slide').first().animate({
marginLeft:-$('.slide').width()
}, 'slow', function(){
//once completely hidden, move this slide next to the last slide
//and reset the margin-left to 0
$(this).appendTo($(this).parent()).css({marginLeft: 0});
});
这是你的电话号码
为了解决滑动问题,我们需要为幻灯片添加一个包装器,并根据所有幻灯片的总宽度设置其宽度 新标记:
<div id="slider">
<div id="slide-container">
<div class="slide">slide 1</div>
<div class="slide">slide 2</div>
</div>
</div>
要在鼠标悬停在滑块上时添加暂停,只需clearInterval
并将其重置以继续:
function slider(){
$('.slide').first().animate({
marginLeft: -w
}, 'slow', function () {
$(this).appendTo($(this).parent()).css({marginLeft: 0});
});
}
//setInterval on DOM ready
var timer = setInterval(slider, 2000);
$('#slider').hover(function(){
//mouse in, clearinterval to pause
clearInterval(timer);
},function(){
//mouse out, setinterval to continue
timer = setInterval(slider, 2000);
});
查看此更新。哦,谢谢。使用appendTo移动末端的幻灯片看起来很整洁。在JSFIDLE中,最后一张幻灯片不是滑动的,它只是在其他人完成滑动时弹出。我正在寻找一张平滑的幻灯片,您是否也可以帮助我使用我编辑问题的暂停滑块方法,先生。是的,我也注意到了这一点。我也更新了我的答案。希望这一切都能解决。干杯
var w = $('#slider').width() / 4;
var l = $('.slide').length;
//set each slide width
$('.slide').width(w);
//set the container width to fix the animation sliding issue
$('#slide-container').width(w * l)
function slider(){
$('.slide').first().animate({
marginLeft: -w
}, 'slow', function () {
$(this).appendTo($(this).parent()).css({marginLeft: 0});
});
}
//setInterval on DOM ready
var timer = setInterval(slider, 2000);
$('#slider').hover(function(){
//mouse in, clearinterval to pause
clearInterval(timer);
},function(){
//mouse out, setinterval to continue
timer = setInterval(slider, 2000);
});