js原生写个简单的轮播图

效果图

css

	 * {
        margin: 0;
        padding: 0;
      }
      .container {
        position: relative;
        width: 640px;
        height: 480px;
        margin: 50px auto;
        overflow: hidden;
      }
      ul {
        list-style: none;
      }
      .main {
        width: 500%;
      }
      .main li {
        float: left;
      }
      .main li img {
        width: 640px;
        height: 480px;
      }

      aside {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 80px;
        color: #ccc;
        background-color: #fff;
        font-size: 30px;
        line-height: 80px;
        text-align: center;
        display: none;
      }
      .container:hover aside {
        display: block;
      }
      aside:hover {
        color: blue;
      }
      .right {
        right: 0;
      }
      .dot {
        position: absolute;
        bottom: 50px;
        right: 100px;
      }
      .dot li {
        float: left;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
      }
      .dot li + li {
        margin-left: 20px;
      }
      .active {
        background-color: red !important;
      }

html

 <div class="container">
      <ul class="main">
        <li><img src="./img/1.jpg" alt="" /></li>
        <li><img src="./img/2.jpg" alt="" /></li>
        <li><img src="./img/3.jpg" alt="" /></li>
        <li><img src="./img/4.jpg" alt="" /></li>
        <li><img src="./img/5.jpg" alt="" /></li>
      </ul>
      <aside class="left"><</aside>
      <aside class="right">></aside>
      <ul class="dot">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

js

	   //获取父级容器
        var oCon = document.getElementsByClassName("container")[0];
        // 获取所有ul
        var oUl = document.getElementsByTagName("ul");
        // 获取第二个ul指示点
        var oDot = oUl[1].getElementsByTagName("li");
        // 两侧按钮
        var aside = document.getElementsByTagName("aside");
        var index = 0,  // 轮播索引
        timer = setInterval(function() {  // 开启计时器
          animate();
        }, 1000);
        // 左右侧动画
        function animate(direction = "R") {
          if (direction === "R") {
            ++index;
          } else {
            --index;
          }
          if (index == -1) {
            index = 4;
          } else if (index == 5) {
            index = 0;
          }
          changeDot(); // 更改点的位置
          oUl[0].style.transform = "translateX(-" + 20 * index + "%)"; //幻灯片位置改变
        }
        // 鼠标移入事件
        oCon.onmouseover = function() {
          clearInterval(timer);
        };
        // 鼠标移出事件
        oCon.onmouseout = function() {
          timer = setInterval(function() {
            animate("R");
          }, 1000);
        };
        // 点击左侧按钮
        aside[0].onclick = function() {
          animate("L");
        };
        // 点击右侧按钮
        aside[1].onclick = function() {
          animate("R");
        };
        // 改变点的位置
        function changeDot() {
          for (var i = 0; i < oDot.length; i++) {
            if (i == index) {
              oDot[index].classList.add("active");
            } else {
              oDot[i].classList.remove("active");
            }
          }
        }
        // 为所有点加点击事件
        for (let i = 0; i < oDot.length; i++) {
              oDot[i].onclick = function () {
                  index = i - 1; // animate索引默认加1，所以这里减去
                  animate("R");
              }
          }