循环Divs（jQuery Carousel）

Question

我已经构建了一个单页应用程序，除了一个部分外，一切正常。这是：

http://efeldberg.biz/assets/projects/HTML5_Banners/ArtInstitute/ColorPicker.html

我尝试了多次尝试让色板部分像旋转木马一样循环，这样用户可以无限期地点击任意一个箭头，然后色板将继续向同一方向滚动。

我已经尝试过任何滑动，misc脚本，我自己的JS和CSS3，但无法解决这个问题。建议非常感谢！谢谢！

Answer 1

你几乎得到了它！

当第二个场景加载时，看起来像是为#swatchContent -503像素的左边距设置动画。请删除此内容，或为left设置动画。看起来这已经搞砸了你的数学。

然后您需要做的就是修复您的终端号码。看起来你在它向前摆动之前向右移动一个块的宽度太远，所以减少它并且你应该是好的。

这里我用jQuery删除了左边距。现在使用箭头似乎按预期工作（直到你到达终点，必须将重置位置更新为0px）：

Answer 2

你没有分享你的代码所以我会分享我的代码 http://jsbin.com/paqim/4/edit你已经拥有了一个不错的无限滑块。

HTML：

<div id="page">
    <div id="swatches">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <button id="prev">&#9664;</button>
    <button id="next">&#9654;</button>
</div>

JQ：

var $s = $("#swatches"),
    $b = $('#prev, #next'),
    $d = function(fl){return $('>div',$s)[fl]();},
    px = 260; // Animation px

$s.prepend( $d('last') ).scrollLeft( px ); // Prepend last + reset pos to '1'.

$b.click(function() {
  if( !$s.is(':animated')){
    if(this.id=="next") $s.animate({scrollLeft:px*2}, 400, function() {
        $s.scrollLeft(px).append($d('first'));
    });
    else $s.prepend($d('last')).scrollLeft(px*2).animate({scrollLeft:px}, 400);
  }
});