javascript - 如何自动化 JavaScript 函数来自动播放幻灯片？

Question

我有一个 div 框画廊，背景上有一些图片和 2 个横向按钮 prev 和 next。单击按钮时，JavaScript 会显示下一张或上一张图片，这没问题，但我也希望使用间隔时间自动进行此转换以显示下一张图片。我该如何继续？这是我的 HTML:

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

这是我的 JavaScript 函数:

// goto next or previous slide
BoxesFx.prototype._navigate = function( dir ) {
    if( this.isAnimating ) return false;
    this.isAnimating = true;

    var self = this, currentPanel = this.panels[ this.current ];

    if( dir === 'next' ) {
        this.current = this.current < this.panelsCount - 1 ? this.current + 1 : 0;          
    }
    else {
        this.current = this.current > 0 ? this.current - 1 : this.panelsCount - 1;
    }

    // next panel to be shown
    var nextPanel = this.panels[ this.current ];
    // add class active to the next panel to trigger its animation
    classie.add( nextPanel, 'active' );
    // apply the transforms to the current panel
    this._applyTransforms( currentPanel, dir );

    // let´s track the number of transitions ended per panel
    var cntTransTotal = 0,

        // transition end event function
        onEndTransitionFn = function( ev ) {
            if( ev && !classie.has( ev.target, 'bg-img' ) ) return false;

            // return if not all panel transitions ended
            ++cntTransTotal;
            if( cntTransTotal < self.panelsCount ) return false;

            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }

            // remove current class from current panel and add it to the next one
            classie.remove( currentPanel, 'current' );
            classie.add( nextPanel, 'current' );
            // reset transforms for the currentPanel
            self._resetTransforms( currentPanel );
            // remove class active
            classie.remove( nextPanel, 'active' );
            self.isAnimating = false;
        };

    if( support.transitions ) {
        currentPanel.addEventListener( transEndEventName, onEndTransitionFn );
    }
    else {
        onEndTransitionFn();
    }
}

Answer 1

好的，我查了一下 BoxesFx。查找此代码:

BoxesFx.prototype._initEvents = function() {
    var self = this, navctrls = this.nav.children;
    // previous action
    navctrls[0].addEventListener( 'click', function() { self._navigate('prev') } );
    // next action
    navctrls[1].addEventListener( 'click', function() { self._navigate('next') } );
    // window resize
    window.addEventListener( 'resize', function() { self._resizeHandler(); } );
}

将其更改为:

BoxesFx.prototype._initEvents = function() {
    var self = this, navctrls = this.nav.children;
    // previous action
    navctrls[0].addEventListener( 'click', function() { self.automate('prev',3000) } );
    // next action
    navctrls[1].addEventListener( 'click', function() { self.automate('next',3000) } );
    // window resize
    window.addEventListener( 'resize', function() { self._resizeHandler(); } );
    window.onload = function () {
      self.automate('next',3000);
    }
}

其中“3000”是显示幻灯片的毫秒数，包括幻灯片的任何动画时间。