jquery - 如何让 jQuery 平滑滚动到不断变化的位置？

Question

我正在尝试制作一个图像滑块，从这个网站中汲取灵感。

我已经让它工作了，但我不知道如何让它在位置之间平滑滑动；如果我只使用 jQuery .animate()，那么它会随机晃动，大概是想追赶排队的 X 位置。

如何在滑块上的点之间平滑滑动？

JSFiddle 版本

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);
});

Answer 1

最简单的方法是添加position: relative;到图像中，并将 scrollLeft() 替换为$(this).children().stop().animate({ left: (-1*scrollX) + 'px' }, 600, 'swing');

您也必须删除浏览器滚动条，但这应该很容易通过overflow: hidden;在父 div 上进行设置。

http://jsfiddle.net/ENhwT/41/

Answer 2

使用 flex 滑块更平滑的滚动。添加move:1flex滑块的功能。

<script type="text/javascript">
$(function(){
  SyntaxHighlighter.all();
});

$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 5,
    smoothHeight: false, 
    move:1,
    start: function(slider){
      $('body').removeClass('loading');
    }
  });
});