jQuery Loop：當到達幻燈片中的最後一個元素時回到第一個元素？

Question

我想使用jQuery來創建一個非常基本的幻燈片。

我目前遇到的問題是幻燈片不會遍歷元素。

基本上，它會繼續進入一個空的空間，即使沒有項目元素留在裏面！

這是一個工作FIDDLE

點擊按鈕幾次，應該明白我的意思。

有什麼辦法可以循環遍歷元素而不是進入空白空間嗎？基本上找到結束/最後一個元素，然後循環回第一個？

這是我的代碼：

var click = 1; 

$("#SLIDE").click(function() { 
    var widths = $('.some').width() * click; 

    $(".some").first() 
      .animate({ "margin-left": "-"+widths }, "slow") 
      .next() 
      .animate({ "margin-left": 0 }, "slow") 
      .end(); 

    click+=1; 
}); 

任何幫助將不勝感激。

Answer 1

檢查JsFiddle Demo

使用模函數進行換行。

click = click % 4;

，或者如果你想讓它動態地獲取元素的數量，您可以使用它代替：

JsFiddle Demo

click = click % $('.some h1').length;

HTML

<div align="center" id="feedTxt"> 

    <div class="some"> 
     <h1>title 1</h1> 
     <br> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> 
    </div> 



    <div class="some"> 
     <h1>title 2</h1> 
     <br> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> 
    </div> 


    <div class="some"> 
     <h1>title 3</h1> 
     <br> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> 
    </div> 


    <div class="some"> 
     <h1>title 4</h1> 
     <br> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> 
    </div> 

</div> 

<button id="SLIDE">Peress to slide</button> 

個

JS

var click = 1; 

$("#SLIDE").click(function() { 
    var widths = $('.some').width() * click; 

    $(".some").first() 
      .animate({ "margin-left": "-"+widths }, "slow") 
      .next() 
      .animate({ "margin-left": 0 }, "slow") 
      .end(); 

    click+=1; 
    click = click % $('.some h1').length; 

}); 

CSS

#feedTxt { 
    display: flex; 
    overflow-x: scroll; 
    height:450px; 
    width:100%; 
} 

.some { 
    flex: 0 0 100%; 
    height: 450px; 
} 

Answer 2

只是算你有多少幻燈片具有並重置計數器到達最後一個時：

var click = 1, 
    slides = $(".some").length; // Count slides 

$("#SLIDE").click(function() { 
    var widths = $('.some').width() * click; 

    $(".some").first() 
      .animate({ "margin-left": "-"+widths }, "slow") 
      .next() 
      .animate({ "margin-left": 0 }, "slow") 
      .end(); 

    click += 1; 
    if (click == slides) click = 0; // Reset the counter, if necessary 
}); 

您可以檢查它in this updated fiddle。

Answer 3

你基本上你自己回答了這個問題，只是把click回0，你會跳回第一張幻燈片。

這裏有一個小提琴：I go back to 0.

基本上，把你想要的幻燈片的數量（讓我們假設點擊代表它），然後只是如果不是更大總量的幻燈片 - 迴歸利潤率爲0

if(click > 3){ 
    click = 0; 
    }