js判断定时器是否启动_原生js如何做出轮播图的效果

<div class="box">
        <ul>
            <li class="active"><img src="./image/微信图片_20190908230534.jpg" altb=""></li>
            <li><img src="./image/微信图片_20190908230541.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230545.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230549.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230554.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230559.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230603.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230608.jpg" alt=""></li>
            <li><img src="./image/微信图片_20190908230611.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ol>
        <span id="left"><</span>
        <span id="right">></span>
    </div>

以上代码是我做出的简单的页面部分。但是不重要，对，不重要！

重要的是我们认真学习的js部分，这才是我们的重点！

虽然在我们学习的后期，会直接使用轮播图插件，快捷方便！

但是！

要是连最基础的js如何实现都不知道，那我只能说，你也就是能当个初级前端工程师，

想升P等级，就是要熟悉并了解最底层代码如何实现，只有这样，才能提高自己！

才能提高P/T等级！才能挣到钱！

闲话不扯了，说多无用，让我们直接去了解最底层的世界吧~~~

var ul_li = document.querySelectorAll('ul li'); 
var ol_li = document.querySelectorAll('ol li');
var left = document.getElementById('left');
var right = document.getElementById('right');
var box = document.getElementsByClassName('box')[0];
var timer = null;     //设置一个定时器，为空指针
var  index = 0;       //设置index为下标，并先赋予其值

此部分为js的最开始部分，我们肯定要先去获取你想要东西，才能去动手去实现，对不对？！

声明变量并赋予你想要的属性，语法这是就需要去熟记了，你想得到什么，并用它来做什么，没有技巧了，注意，括号内的是否加点，是否选中的问题。

在此问题中，肯定有重复选中的问题，所以，我们需要先去封装一个排它的函数，以便我们之后去调用。

//封装排它的函数
function pta(a){
    for(var i = 0; i<ul_li.length;i++){                 //排它循环
        ul_li[i].classList.remove('active');
        ol_li[i].classList.remove('active');

    }
    ul_li[index].classList.add('active');
    ol_li[index].classList.add('active');
}

接下来，在考虑，我们要将它动起来对不对，但是，怎么让它自己跑起来呢？这就是我们的核心之一（提示：这个时候，就要去咱们上去封装的排它函数了）

function auto(){
    index++;    //下标自增
    if(index >= ul_li.length){    //下标自增也需要上限啊，也不可能无限去自增。这时候就加个判断，让它大于等于li长度时，让它归零，以此循环
        index = 0;
    }
    pta(index);     //在循环中排它
}

还没完！还没完！让自动去轮播，就需要用到我们的定时器函数了，只有这样，它像火车一样嘟嘟嘟跑起来啊

//自动轮播，顺序为右
timer = setInterval(function(){
    auto();
},1000)

自动轮播部分完成，此时我们也需要根据图的顺序，去点击让它换到下一个或者上一个，该加点击事件了！

//右点击轮播
right.onclick = function(){
    auto(index);
}
//左点击轮播
left.onclick = function(){
    index--;
    if(index < 0){               //因为我们的习惯都是默认向右点击，如果我们需要向左点击让它往上一个图走，需要改变它的判断了
        index = ul_li.length - 1;
    }
    pta(index);
}

点击和自动都能跑起来了，我们人是高等动物，我们想让它跑就跑，想让它停就停。停止和开启，都要鼠标去控制的吧，我们就去加个鼠标划入划出的事件就好了

//鼠标移入，轮播停止
box.onmouseenter = function(){
    clearInterval(timer);     //清除定时器
    timer = null;          //让定时器重新为空
}
//鼠标移出，轮播重新开启
box.onmouseleave = function(){
    timer = setInterval(function(){
        auto();
    },1000);
}

最后，再加人为去点击，我想看哪个图就能看到哪个，并让自己划出时，轮播为接着自己点击这个图下一个图

//点击数字小圆圈，进行识别哪个图
for(var j = 0; j <ol_li.length;j++){
 ol_li[j].idx = j;
 ol_li[j].onclick = function(){
 index = this.idx;  //坐标赋值为this.idx（此时坐标）
 pta(this.idx);      //排他函数，传入实参this.idx    
    }
}

，大功告成~

超级超级建议版的轮播图完成了！终于可以开心的玩耍了！