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

使用modulo函数进行换行。

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

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

3 个答案: