自动单击滑块上的子弹，使滑块自动播放所有幻灯片
自动单击滑块上的子弹，使滑块自动播放所有幻灯片
提问于 2015-05-13 09:28:03
我有一个自定义滑块，可以旋转每一个图像，当我点击子弹。我需要使它自动播放，所以我想，如果页面准备好了，它的触发点击第一个项目，第2，第3，第4等，并再次回到第一个项目.但它只适用于第一和第二张幻灯片。
每个幻灯片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>这是我的小提琴
任何帮助都会受到感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-13 09:40:34
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。
Stack Overflow用户
发布于 2015-05-13 09:40:58
First:，您需要将setInterval块移出pageTriggers.forEach块的外部。正如您所拥有的，它正在为每个幻灯片创建一个定时器，但是第一个正在覆盖其他幻灯片(这就是为什么它只在前两张幻灯片之间反弹)。
第二步:在forEach之外的，您不能将this传递给navigate函数。所以你需要一些其他的方法来找出要去哪一张幻灯片。下面的新幻灯片由newIndex表示。
解决方案：
setInterval(function () {
var newIndex = current + 1 >= pageTriggers.length ? 0 : current + 1
navigate(pageTriggers[newIndex]);
}, 5000);见小提琴。
干得不错，我喜欢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30210743
复制相关文章
相似问题
腾讯云开发者
