Javascript jQuery循环：当到达幻灯片中的最后一个元素时，是否返回到第一个元素？

我正在尝试使用jQuery创建一个非常基本的幻灯片

我目前的问题是幻灯片不会在元素上循环

基本上，它将继续进入一个空的空间，即使没有项目元素留在里面

这是一个工作环境

点击按钮几次，就会明白我的意思

有没有什么方法可以在元素之间循环，而不是进入一个空白区域？基本上找到结束/最后一个元素，然后循环回第一个元素

这是我的代码：

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;
}); 

---

任何帮助都将不胜感激。

只要数一数您有多少张幻灯片，在到达最后一张幻灯片时重置计数器：

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
}); 

你可以检查它。

检查

使用模函数包装

click=单击%4；

或者，如果您希望动态获取元素的数量，可以改为使用：

click=click%$（'.some h1'）。长度；

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>

CSS

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;

}); 

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

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

---

您基本上是自己回答的，只需将

单击

返回到0，您将跳回第一张幻灯片

这是一把小提琴：

基本上，取你想要的幻灯片数量（假设点击代表它），然后如果它大于幻灯片总数-将边距返回到0

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