jQuery滑塊onclick事件循環照片

我正在使用jQuery創建一個基於onclick事件的非常簡單的幻燈片事件。當用戶點擊下一個按鈕時，滑塊將保留餘量： - = 400px。該滑塊工作得很好，但是當它到達最後一個滑塊並且用戶再次單擊該按鈕時它不會顯示任何東西，它將會變成 - = 400px。我想要發生的是，當用戶點擊最後一張圖片時點擊，顯示第一張圖片，然後第二張圖片，等等。當有人點擊按鈕時，我想有無盡的循環。希望有人可以幫助解決這個問題。jQuery滑塊onclick事件循環照片

謝謝。

HTML代碼：

<div class="slideClick"> 
     <ul class="sliderClick"> 
      <li class="slidesClick"><img src ="imgs/model_01.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_02.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_03.jpeg"></li> 
      <li class="slidesClick"><img src ="imgs/model_04.jpg"></li> 
      <li class="slidesClick"><img src ="imgs/model_01.jpg"></li> 
     </ul> 
</div> 
    <button class="clickPrev">Prev</button> 
    <button class="clickNext">Next</button>

CSS代碼：

.slideClick { 
    clear: both; 
    width:400px; 
    height:400px; 
    border: 1px solid black; 
    overflow: hidden; 
    margin-top: 100px; 
} 

.slideClick .sliderClick{ 
    width:2000px; 
    height:400px; 
} 

.slideClick .sliderClick .slidesClick { 
    list-style: none; 
} 

.slideClick .sliderClick .slidesClick img{ 
    width:400px; 
    height:400px; 
    float:left; 
}

jQuery代碼：

var currentClickSlider = 1; 

$(".clickNext").on("click", function(){ 
    $(".sliderClick").animate({marginLeft: "-=400px"}, 500, function(){ 

     currentClickSlider++; 
     if (currentClickSlider === $(".slidesClick").length){ 

      currentClickSlider = 1; 
      $(".sliderCLick").css("margin-left", 0); 
     } 

    }); 
});

來源

2016-04-17 NoName84

if (currentClickSlider === $(".slidesClick").length + 1) {

你想要做的是檢查，如果該元素是最後一個元件。計數器從1開始，因此在N + 1個元素之後，我們重複滑塊。

來源

2016-04-17 19:20:25 Warrior

謝謝你的回答。然而，我的錯誤是我沒有在最後包含.length。我已經使用過你的代碼，但它仍然無法正常工作。 – NoName84

在動畫回調函數中有幾個錯誤類型，例如$（「。sliderCLick」）。我建議將重新啓動滑塊的代碼放在回調之外，因爲您想在執行任何動畫之前重置其狀態。首先你要檢查你試圖顯示哪個元素，然後根據這個元素進行動畫處理。 – Warrior

如果你不忙，你能告訴我你會怎麼寫代碼？爲了這個工作？ – NoName84

jQuery滑塊onclick事件循環照片

回答

相關問題