javascript - 自动单击 slider 上的元素符号以使所有幻灯片自动播放 slider

Question

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

每张幻灯片 id 使用 attr data-container 的元素符号:

<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

我们将不胜感激。

Answer 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。