我正在尝试制作一个图像滑块,从这个网站中汲取灵感。
我已经让它工作了,但我不知道如何让它在位置之间平滑滑动;如果我只使用 jQuery .animate(),那么它会随机晃动,大概是想追赶排队的 X 位置。
如何在滑块上的点之间平滑滑动?
HTML:
<div id="slider">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
<img src="http://placekitten.com/100/80">
</div>
CSS:
#slider{
width: 550px;
height:134px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#slider img {
border: 1px Solid #282828;
margin: 16px 6px 16px 10px;
padding:0;
}
#slider img:hover{
border: 1px Solid #eee;
}
jQuery:
$("#slider").mousemove(function(e) {
var sidePadding = 50;
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var scrollX = ((relX - sidePadding) / ($(this).width() + sidePadding)) * ($(this).prop('scrollWidth'));
$(this).scrollLeft(scrollX);
});