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