原生js实现轮播图。可前进可后退，可暂停,可自动播放

一直在用ui框架实现走马灯效果，对原生的实现基本都不怎么熟悉了，所以特地写了个js原生轮播的效果

代码也很简单，不复杂，思路对上了就可以了

   <div class="content" id="content">
      <a href="javascript:;" id="prev"><</a>
      <a href="javascript:;" id="next">></a>
      <img src="" alt="" />
      <span>正在计算中</span>
      <p>文字说明正在加载中</p>
      <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ul>
    </div>

 思路一:js代码 清空所有的当前状态，给当前的li加active

     window.onload = function () {
        var oDiv = document.getElementById("content");
        var oImg = oDiv.getElementsByTagName("img")[0];
        var oSpan = oDiv.getElementsByTagName("span")[0];
        var oP = oDiv.getElementsByTagName("p")[0];
        var oLi = oDiv.getElementsByTagName("li");
        var oPrev = document.getElementById("prev");
        var oNext = document.getElementById("next");
        var arrUrl = ["./img/pic1.jpg", "./img/pic2.jpg", "./img/pic3.jpg"];
        var arrText = ["促销海报1", "促销海报2", "促销海报3"];
        //初始化数据
        let count = 0;
        let timer = null;
        setTimeout(() => {
          tab();
        }, 3000);

        for (let index = 0; index < oLi.length; index++) {
          const element = oLi[index];
          element.index = index;
          element.onclick = function () {
            count = this.index;
            for (var i = 0; i < oLi.length; i++) {
              oLi[i].className = "";
            }
            this.className = "active";
            tab();
          };
        }
        oPrev.onclick = function () {
          count--;
          if (count === -1) {
            count = arrUrl.length - 1;
          }
          tab();
        };
        oNext.onclick = function () {
          count++;
          if (count === arrUrl.length) {
            count = 0;
          }
          tab();
        };
        //初始化数据
        function tab() {
          oImg.src = arrUrl[count];
          oP.innerHTML = arrText[count];
          oSpan.innerHTML = count + 1 + "/" + arrUrl.length;
          oLi[count].className = "active";
        }
        autoPlay();
        function autoPlay() {
          timer = setInterval(() => {
            count++;
            if (count === arrUrl.length) {
              count = 0;
            }
            for (var i = 0; i < oLi.length; i++) {
              oLi[i].className = "";
            }

            tab();
          }, 2000);
        }
        oDiv.onmouseover = function () {
          clearInterval(timer);
        };
        oDiv.onmouseout = function () {
          autoPlay();
        };
      };
    

 思路一:js代码 记住上一个的active状态，清空然后给当前的li加active

    window.onload = function () {
        var oDiv = document.getElementById("content");
        var oImg = oDiv.getElementsByTagName("img")[0];
        var oSpan = oDiv.getElementsByTagName("span")[0];
        var oP = oDiv.getElementsByTagName("p")[0];
        var oLi = oDiv.getElementsByTagName("li");
        var oPrev = document.getElementById("prev");
        var oNext = document.getElementById("next");
        var arrUrl = ["./img/pic1.jpg", "./img/pic2.jpg", "./img/pic3.jpg"];
        var arrText = ["促销海报1", "促销海报2", "促销海报3"];
        //初始化数据
        let count = 0;
        let oldLi = null; //保存上一个当前状态
        let timer = null;
        setTimeout(() => {
          tab();
        }, 3000);

        for (let index = 0; index < oLi.length; index++) {
          const element = oLi[index];
          element.index = index;
          element.onclick = function () {
            count = this.index;
            oldLi.className = ""; //清空上一个的当前状态
            this.className = "active";
            oldLi = oLi; //重置当前的状态
            tab();
          };
        }
        oPrev.onclick = function () {
          oldLi.className = "";
          count--;
          if (count === -1) {
            count = arrUrl.length - 1;
          }
          tab();
        };
        oNext.onclick = function () {
          oldLi.className = "";
          count++;
          if (count === arrUrl.length) {
            count = 0;
          }
          tab();
        };
        //初始化数据

        function tab() {
          oImg.src = arrUrl[count];
          oP.innerHTML = arrText[count];
          oldLi = oLi[count];
          oSpan.innerHTML = count + 1 + "/" + arrUrl.length;
          oLi[count].className = "active";
        }
        autoPlay();
        function autoPlay() {
          timer = setInterval(() => {
            oldLi.className = "";
            count++;
            if (count === arrUrl.length) {
              count = 0;
            }
            tab();
          }, 2000);
        }
        oDiv.onmouseover = function () {
          clearInterval(timer);
        };
        oDiv.onmouseout = function () {
          autoPlay();
        };
      };