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/

自动单击滑块上的项目符号以使滑块自动播放

1 个答案: