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”是显示幻灯片的毫秒数，包括幻灯片的任何动画时间。

Answer 2

您可以使用javascripts setInterval（）函数：

http://www.w3schools.com/jsref/met_win_setinterval.asp

编辑：

页面加载后，您必须调用setInterval（）函数。例如，您可以使用body标签的onload-Event：

HTML

<body onload="startAutoplay()">
  // your slider and content
</body>

的Javascript

function startAutoplay(){
  setInterval(function(){ 
    // call your next() or previous() function here
 }, 3000);
}

这会将计时器设置为3秒

Answer 3

只需添加几个方法，制作新按钮即可调用它们。该物业＆＃34; auto＆＃34;它运行时不会为零，以后可能会很方便。

BoxesFx.prototype.auto = 0;
BoxesFx.prototype.automate = function(dir,time){
    var scope = this;
    this.auto = setInterval(function(){
        scope._navigate(dir);
    },time);
}
BoxesFx.prototype.stopAutomate = function(){
    clearInterval(this.auto);
}

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

3 个答案: