javascript - jquery 滚动动画不工作

Question

我正在使用 jquery 实现无限滚动，这里所有列表项都是从数据库呈现数据。一切正常，但我的滚动条不随动画一起滚动，它看起来只是在跳跃，我怎么能让它动画而不是跳跃!...请

[Jquery]

var item_width = $('.scroller li').outerWidth();
var left_value = item_width * (-1);
$('.scroller li:first').before($('.scroller li:last'));
$('.scroller').css({'left' : left_value});

$('#prev').click(function() {
    var left_indent = parseInt($('.scroller').css('left')) - item_width;
    $('.scroller').animate({'left' : '-='+left_indent}, 400, function(){
        $('.scroller li:first').before($('.scroller li:last'));
        $('.scroller').css({'left' : left_value});
    });
    return false;
});

$('#next').click(function() {
    var left_indent = parseInt($('.scroller').css('left')) - item_width;
    $('.scroller').animate({'left' : '+='+left_indent}, 400, function () {
        $('.scroller li:last').after($('.scroller li:first'));
        $('.scroller').css({'left' : left_value});
    });
    return false;
});

[样式]

*{margin: 0;padding: 0;list-style: none;}
.scroller{height:70px;overflow:hidden;}
.scroller li{float:left;display:inline-block;position:relative;border-bottom:1px solid #e8eef4;border-top:1px solid #e8eef4;border-right:1px solid #ddd;height:70px;width:25%;cursor:pointer;
    background-image: -moz-radial-gradient(top, #fff, #ddd);}
.scroller li:nth-child(4),.scroller li:nth-of-type(4){border-right:0}
.scroller li a{display:block;margin-top:8%;height:90%;font-size:x-small;text-align:center;}
.scroller .active,.scroller li:hover{background-image:-moz-radial-gradient(top, #ddd, #fff)}
.scroller .active:before{content:'';height:0;position:absolute;top:-1px;width:0;left:42%;border: 10px solid transparent;border-top-color:#fff;z-index:100}
.scroller li a img{border:1px solid #ccc;width:80%;height:40%}

[HTML]

<div>
   <ul class="scroller">
      <li class="item">01</li>
      <li class="item">02</li>
      <li class="item">03</li>
      <li class="item">04</li>
      <li class="item">05</li>
      <li class="item">06</li>
      <li class="item">07</li>
      <li class="item">08</li>
      <li class="item">09</li>
      <li class="item">10</li>
   </ul>
   <p class="tar"><a href="javascript:void(0);" id="prev">&lsaquo;</a><a href="javascript:void(0);" id="next">&rsaquo;</a></p>
</div>

Answer 1

您可以使用 lucid.js，它们做得很好，我认为它可以节省您的时间。他们有一个很好的 API，可以让您选择要滚动的元素甚至整个页面。

如果对你有帮助，请告诉我。

这里是文档和演示的链接:http://ataredo.com/morphology/lucidscroll/