自动单击滑块上的子弹使滑块自动播放

Question

我有一个自定义滑块，可以旋转每一个图像，当我点击子弹。我需要使它自动播放，所以我想如果页面准备好了，它是触发点击第一个项目，然后第二个，然后回到第一个项目再次.

每次幻灯片使用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>
    </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"/>
        </header>
    </div>
    <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"/>
        </header>

    </div>

这是我的FIDDLE

任何帮助都将受到赞赏:)

Answer 1

您可以使用setInterval函数来完成此操作。在你的代码中：

pageTriggers.forEach( function( pageTrigger ) {
pageTrigger.addEventListener( 'click', function( ev ) {
    ev.preventDefault();
    navigate( this );
    console.log(pageTrigger);
} );
setInterval(function() {
    navigate( pageTrigger );
}, 5000);

} )；

演示： http://jsfiddle.net/9fupL7hc/1

好的，我更新了代码：

var id = 1;
setInterval(function() {
    id ++;
    if ( id <= document.querySelectorAll(".container").length ) {
        navigate( document.querySelector('a[data-container="container-' + id + '"') );
    } else {
        id = 1;
    }
}, 5000);

演示：http://jsfiddle.net/9fupL7hc/8/