jquery包装圆形滚动

Question

除了使用滚轮包装的旋转木马之外还有什么？目前我不使用Carousel，因为它似乎堵塞了网站。我在下面使用的JS只能在div允许的范围内使用。我想要的是当它到达最后并且用户想要返回到开始时，用户不必一直点击左侧。他们可以点击右箭头，它会从第一个div开始。我已经看到了wrap = circular，但我似乎无法将其应用于此处。

JS

$(function() { 

    var animating = false, 
     outerwrap = $(".outerwrapper"); 

    $("#right, #left").click(function() { 
     if (animating) { 
      return; 
     } 
     var dir = (this.id === "right") ? '+=' : '-='; 
     animating = true; 
     outerwrap.animate({ 
      scrollLeft: dir + '251' 
     }, 1000, function() { 
      animating = false; 
     }); 
    }); 

}); 

HTML

<div class="outerwrapper"> 
    <div class="innerwrapper"> 
     <div class="prod"> 
     <div class="prod"> 
     <div class="prod"> 
     <div class="prod"> 
    </div> 
</div> 

<div> 
    <div class="left" id="left"></div> 
    <div class="right" id="right"></div> 
</div> 

Answer 1

我想补充的最后一个元素上的一个标记，并添加一个类的当前元素。

然后我会检查，看看是否有源元件具有最后一节课，如果再把它动画left: 0

JS 

$(function() { 

    var animating = false, 
     outerwrap = $(".outerwrapper"); 

    $("#right, #left").click(function() { 
     if (animating) { 
      return; 
     } 
     var dir = (this.id === "right") ? '+=' : '-='; 
     animating = true; 

     $('.active').removeClass('active').next().addClass('active'); 
     if($('.active').hasClass('last')){ 
      outerwrap.animate({ 
       scrollLeft: 0 
      }, 1000, function() { 
       animating = false; 
      }); 
     }else{ 
      outerwrap.addClass('active').animate({ 
       scrollLeft: dir + '251' 
      }, 1000, function() { 
       animating = false; 
      }); 
     } 
    }); 

}); 

HTML 

<div class="outerwrapper"> 
    <div class="innerwrapper"> 
     <div class="prod active"> 
     <div class="prod"> 
     <div class="prod"> 
     <div class="prod last"> 
    </div> 
</div> 

<div> 
    <div class="left" id="left"></div> 
    <div class="right" id="right"></div> 
</div> 

希望这是有道理的。我没有测试过这么好的运气：p