自动单击滑块上的项目符号以使所有幻灯片的滑块自动播放答案

【问题标题】：Auto click bullets on slider to make slider autoplay for all slides自动单击滑块上的项目符号以使所有幻灯片的滑块自动播放
【发布时间】：2015-05-13 18:51:08
【问题描述】：

我有一个自定义滑块，当我单击项目符号时可以旋转每个图像。我需要让它自动播放，所以我想如果页面准备好了，它会触发点击第一个项目符号，第二个，第三个，第四个等，然后再次回到第一个项目符号...... 但它只适用于第一张和第二张幻灯片。

每张幻灯片使用 attr data-container 的项目符号id：

<nav class="thumb-nav">
        <a data-container="container-1" class="thumb-nav__item" href="#"><span>1</span></a>
        <a data-container="container-2" class="thumb-nav__item" href="#"><span>2</span></a>
                    <a data-container="container-3" class="thumb-nav__item" href="#"><span>3</span></a>
        <a data-container="container-4" class="thumb-nav__item" href="#"><span>4</span></a>
    </nav>

这些是幻灯片内容：

<div id="container-1" class="container theme-1">
        <header class="intro">
            <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header01.jpg" alt="Lava"/>
            <!-- /intro__content -->
        </header><!-- /intro -->
    </div><!-- /container -->
    <div id="container-2" class="container theme-2">
        <header class="intro">
            <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg" alt="Road"/>
            <!-- /intro__content -->
        </header><!-- /intro -->

    </div>
 <div id="container-3" class="container theme-3">
        <header class="intro">
              <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header03.jpg"     alt="Lava"/>
         </header>
 </div>
 <div id="container-4" class="container theme-4">
        <header class="intro">
            <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg" alt="Lava"/>
      </header>
   </div>

这是我的FIDDLE

我们将不胜感激。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

setInterval 不应该在 forEach 循环内。

var pageIndex = 0;
setInterval(function() {
    pageIndex ++;
    if(pageIndex >= pageTriggers.length) pageIndex = 0;
    navigate( pageTriggers[pageIndex] );
}, 5000);

参考jsFiddle

希望这会有所帮助。如果您的问题没有得到解答，请告诉我。

编辑：

if(pageIndex >= pageTriggers.length)

注意： 我在这里创建一个新的pageIndex，你可以考虑使用你已经定义的全局变量current。

【讨论】：

thankyou @Vinod Kumar ，但是当它在最后一张幻灯片上显示时，它不能再回到第一张幻灯片。有什么建议吗？
嗨@vanio178，编辑应该对此有所帮助。将条件替换为已编辑的条件。我会更新我的答案...
这样做的问题是它忽略了当前幻灯片是什么并创建了自己的索引。 @vanio178 的代码已经有一个索引：current。如果您单击下一张幻灯片，它将被卡在那里 10 秒钟。如果您单击以跳过幻灯片，它将移回已跳过的幻灯片。另外@VinodKumar，请注意第 2 行的缩进错误。
@jcuenod，是的，您的观点非常有效。我会对此做一个说明。谢谢

【解决方案2】：

首先：您需要将setInterval 块移到pageTriggers.forEach 块之外。正如您所拥有的那样，它为每张幻灯片创建了一个计时器，但随后第一个将覆盖其他幻灯片（这就是为什么它只在您的前两张幻灯片之间弹跳）。

第二：在forEach 之外，您不能将this 传递给您的navigate 函数。因此，您将需要一些其他方法来确定要转到哪张幻灯片。这张新幻灯片在下面由newIndex 表示。

解决方案：

setInterval(function () {
    var newIndex = current + 1 >= pageTriggers.length ? 0 : current + 1
    navigate(pageTriggers[newIndex]);
}, 5000);

请参阅fiddle。

干得好，我喜欢。

【讨论】：