javascript - jQuery 循环 : Go back to the first element when reached the last element in a slideshow?

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