悬停以左右移动滑块
也许这可以帮助您
function loopNext(){
$('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext);
}
function loopPrev(){
$('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev);
}
function stop(){
$('#sliderWrapper').stop();
}
$('#next').hover(function() {
loopNext();
},function() {
stop();
});
$('#prev').hover(function() {
loopPrev();
},function() {
stop();
});
我会建议使用鼠标悬停事件。当鼠标开始动画时,鼠标停止动画时。
这应该是一个评论。 – 2014-09-05 14:52:10
即使我没有实现鼠标移动,我仍然没有得到想要的效果,而只是将它移动超过200px一次。见[这里](http://jsfiddle.net/linddss/eoyd9tnq/)。 – linddss 2014-09-05 14:54:22
试试这个jsFiddle
这会,上next
悬停,开始往容纳div
的width
动画。当你退出时,它会停止。在prev
悬停将开始动画到0
,当你将鼠标移出它将停止。
$('#next').hover(function() {
$('#sliderWrapper').animate({scrollLeft: $(this).siblings("#sliderWrapper").width()}, 5000);
}, function() {
$('#sliderWrapper').stop();
});
$('#prev').hover(function() {
$('#sliderWrapper').animate({scrollLeft: 0 }, 5000);
}, function() {
$('#sliderWrapper').stop();
});
也可以,谢谢! – linddss 2014-09-05 15:00:47
非常感谢你!这是工作[小提琴](http://jsfiddle.net/linddss/88hv1hvs/)! – linddss 2014-09-05 14:59:30
@adrxlm:我的回答错了,我首先以为你的回答和我回答的一样。但你已经很好地回答了它 – 2014-09-05 15:14:06