Javascript 在滑块中插入计时器

我正在为一个网站开发一个滑块，但不知道如何将其置于自动模式，以便滑块自动滑动。我只是想，滑块将改变面板自动后，一定的时间请帮助我

`

)；（功能（窗口）{

“严格使用”；
//基于http://responsejs.com/labs/dimensions/
函数getViewport（轴）{
var客户端，内部；
如果（轴=='x'）{
client=docElem['clientWidth']；
内部=窗口['innerWidth']；
}
否则，如果（轴=='y'）{
客户=docElem['clientHeight']；
内部=窗['innerHeight']；
}
返回客户<内部？内部：客户；
}
var docElem=window.document.documentElement，
Transandeventnames={
“WebKittTransition”：“WebKittTransitionEnd”，
'MozTransition'：'transitionend'，
“OTransition”：“oTransitionEnd”，
“msTransition”：“MSTransitionEnd”，
“transition”：“transitionend”
},
transEndEventName=transEndEventNames[现代化前缀（'transition'）]，
支持={transitions:modernizer.cstransitions}，
win={宽度：getViewport（'x'），高度：getViewport（'y'）}；
功能扩展（a，b）{
对于（b中的var键）{
如果（b.hasOwnProperty（键））{
a[键]=b[键]；
}
}
返回a；
}
函数框Fx（el，选项）{
this.el=el；
this.options=extend（{}，this.options）；
扩展（这个。选项，选项）；
这个；
}
BoxesFx.prototype.options={}
prototype.\u init=function（）{
//设置转换配置
这个；
//效果如何
this.effect=this.el.getAttribute（'data effect'）| |'effect-1'；
//检查是否设置动画
this.isAnimating=false；
//面板
this.panels=[].slice.call（this.el.queryselectoral（'.panel'））；
//面板总数（本演示共4个）
//this.panelscont=this.panels.length；
此.panelScont=4；
//当前专家组索引
该电流=0；
classie.add（此.panels[0]，“current”）；
//将图像替换为4个div，每个div包括图像
var self=这个；
this.panels.forEach（函数（面板）{
var img=panel.querySelector（'img'），imgReplacement=''；
对于（变量i=0；i0？this.current-1:this.panelscont-1；
}
//下一个面板将显示
var nextPanel=this.panels[this.current]；
//将“活动类”添加到下一个面板以触发其动画
类别添加（下一个名称“活动”）；
//将变换应用于当前面板
此应用程序转换（当前）
'use strict';

// based on http://responsejs.com/labs/dimensions/
function getViewport(axis) {
    var client, inner;
    if( axis === 'x' ) {
        client = docElem['clientWidth'];
        inner = window['innerWidth'];
    }
    else if( axis === 'y' ) {
        client = docElem['clientHeight'];
        inner = window['innerHeight'];
    }

    return client < inner ? inner : client;
}

var docElem = window.document.documentElement,
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions },
    win = { width : getViewport('x'), height : getViewport('y') };

function extend( a, b ) {
    for( var key in b ) { 
        if( b.hasOwnProperty( key ) ) {
            a[key] = b[key];
        }
    }
    return a;
}

function BoxesFx( el, options ) {   
    this.el = el;
    this.options = extend( {}, this.options );
    extend( this.options, options );
    this._init();
}

BoxesFx.prototype.options = {}

BoxesFx.prototype._init = function() {
    // set transforms configuration
    this._setTransforms();
    // which effect
    this.effect = this.el.getAttribute( 'data-effect' ) || 'effect-1';
    // check if animating
    this.isAnimating = false;
    // the panels
    this.panels = [].slice.call( this.el.querySelectorAll( '.panel' ) );
    // total number of panels (4 for this demo)
    //this.panelsCount = this.panels.length;
    this.panelsCount = 4;
    // current panel´s index
    this.current = 0;
    classie.add( this.panels[0], 'current' );
    // replace image with 4 divs, each including the image
    var self = this;
    this.panels.forEach( function( panel ) {
        var img = panel.querySelector( 'img' ), imgReplacement = '';
        for( var i = 0; i < self.panelsCount; ++i ) {
            imgReplacement += '<div class="bg-tile"><div class="bg-img"><img src="' + img.src + '" /></div></div>'
        }
        panel.removeChild( img );
        panel.innerHTML = imgReplacement + panel.innerHTML;
    } );
    // add navigation element
    this.nav = document.createElement( 'nav' );
    this.nav.innerHTML = '<span class="prev"><i></i></span><span class="next"><i></i></span>';
    this.el.appendChild( this.nav );
    // initialize events
    this._initEvents();
}

// set the transforms per effect
// we have defined both the next and previous action transforms for each panel
BoxesFx.prototype._setTransforms = function() {
    this.transforms = {
        'effect-1' : {
            'next' : [
                'translate3d(0, ' + (win.height/2+10) + 'px, 0)', // transforms for 1 panel
                'translate3d(-' + (win.width/2+10) + 'px, 0, 0)', // transforms for 2 panel
                'translate3d(' + (win.width/2+10) + 'px, 0, 0)', // transforms for 3 panel
                'translate3d(0, -' + (win.height/2+10) + 'px, 0)' // transforms for 4 panel
            ],
            'prev' : [
                'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                'translate3d(0, ' + (win.height/2+10) + 'px, 0)',
                'translate3d(0, -' + (win.height/2+10) + 'px, 0)',
                'translate3d(-' + (win.width/2+10) + 'px, 0, 0)'
            ]
        },
        'effect-2' : {
            'next' : [
                'translate3d(-' + (win.width/2+10) + 'px, 0, 0)',
                'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                'translate3d(-' + (win.width/2+10) + 'px, 0, 0)',
                'translate3d(' + (win.width/2+10) + 'px, 0, 0)'
            ],
            'prev' : [
                'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,' + (win.height/2+10) + 'px, 0)'
            ]
        },
        'effect-3' : {
            'next' : [
                'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,' + (win.height/2+10) + 'px, 0)'
            ],
            'prev' : [
                'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,-' + (win.height/2+10) + 'px, 0)',
                'translate3d(0,-' + (win.height/2+10) + 'px, 0)'
            ]
        }
    };  
}

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(); } );
}

// 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();
    }
}

BoxesFx.prototype._applyTransforms = function( panel, dir ) {
    var self = this;
    [].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile, pos ) {
        tile.style.WebkitTransform = self.transforms[self.effect][dir][pos];
        tile.style.transform = self.transforms[self.effect][dir][pos];
    } );
}

BoxesFx.prototype._resetTransforms = function( panel ) {
    [].slice.call( panel.querySelectorAll( 'div.bg-img' ) ).forEach( function( tile ) {
        tile.style.WebkitTransform = 'none';
        tile.style.transform = 'none';
    } );
}

BoxesFx.prototype._resizeHandler = function() {
    var self = this;
    function delayed() {
        self._resize();
        self._resizeTimeout = null;
    }
    if ( this._resizeTimeout ) {
        clearTimeout( this._resizeTimeout );
    }
    this._resizeTimeout = setTimeout( delayed, 50 );
}

BoxesFx.prototype._resize = function() {
    win.width = getViewport('x');
    win.height = getViewport('y');
    this._setTransforms();
}

// add to global namespace
window.BoxesFx = BoxesFx;

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Automatic Slideshow</h2>

<div class="w3-content w3-section" style="max-width:500px">
  <img class="mySlides" src="img_la.jpg" style="width:100%">
  <img class="mySlides" src="img_ny.jpg" style="width:100%">
  <img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

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(); } );
    var i=0;
    setInterval(function(){
    navctrls[i].trigger('click')
   i = i++ % 2
    },1000)
}