Question

我有一个自定义滑块，可以在单击子弹时旋转每个图像。我需要让它自动播放，所以我想如果页面准备就绪，它会触发点击第1个子弹，第2个，第3个，第4个等等再次回到第1个子弹...... 但它仅适用于第1张和第2张幻灯片。

每个幻灯片data-container使用attr 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

任何帮助都将受到赞赏。

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。

Answer 2

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

第二：在forEach之外，您无法将this传递给navigate功能。因此，您将需要一些其他方法来确定要去哪个幻灯片。新幻灯片由newIndex表示。

<强>解决方案：

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

请参阅 fiddle 。

不错的工作，我喜欢它。

在滑块上自动单击项目符号，以便为所有幻灯片制作滑块自动播放

2 个答案: