使用原生JS写一个图片轮播

• 图片轮播好像经常要用到，让图片轮播的方法：将多个大小相同的图片横排放在一个图片中，然后在图片容器外加一个展示容器，并为图片容器添加自定义动画，在动画不同阶段设置递增的偏移值即可实现图片轮播。

<div class="wrap" id='wrap'>
  <!-- 要轮播的图片 -->
  <ul id="pic">
      <li><img src="image/banner1.jpg" alt=""></li>
      <li><img src="image/banner2.jpg" alt=""></li>
      <li><img src="image/banner3.jpg" alt=""></li>
      <li><img src="image/banner4.jpg" alt=""></li>
  </ul>
  <!-- 左右切换按钮 -->
  <ul>
    <li class="left" id="left"><img src="image/.png" /></li>
    <li class="right" id="right"><img src="image/foot.png" /></li>
  </ul>
  <!-- 分页器 -->
  <ol id="list">
    <li class="on">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ol>
</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  height: 480px;
  width: auto;
  overflow: hidden;
  position: relative;
}

.wrap ul {
  position: absolute;
}

.wrap ul li {
  height: 480px;
  width: auto;
}

.wrap ol {
  position: absolute;
  left: 40%;
  bottom: 10px;
}

.wrap ol li {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #ccc;
  border: solid 7px darkgray;
  margin-left: 5px;
  color: #000;
  float: left;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.wrap ol .on {
  background: red;
  color: #fff;
}

.left {
  position: absolute;
  left: 50px;
  top: 50%;
  clip: rect(-24px 57px 108px -13px);
}

.right {
  position: absolute;
  top: 50%;
  right: 50px;
  clip: rect(-19px 112px 108px 41px);
}

img {
  width: 100%;
}

window.onload = function () {
  // 获取DOM元素节点
  left = document.getElementById("left");
  right = document.getElementById("right");
  div = document.getElementById("wrap");
  pic = document.getElementById("pic").getElementsByTagName("li");
  item = document.getElementById("list").getElementsByTagName("li");
  var index = 0;
  function change() {
    for (var i = 0; i < pic.length; i++) {
      pic[i].style.display = "none";
      item[i].className = "";
    }

    if (index > 3) {
      index = 0;
    }

    pic[index].style.display = "block";
    item[index].className = "on";
    index++;
  }

  var set = setInterval(change, 1500);
  for (var k = 0; k < item.length; k++) {
    item[k].index = k;
    item[k].onclick = function () {

      for (var j = 0; j < pic.length; j++) {
        pic[j].style.display = "none";
        item[j].className = "";
      }

      index = this.index;
      pic[index].style.display = "block";
      item[index].className = "on";
    }
  }

  // 鼠标移动到图片上时(轮播停止,切换按钮显示)
  div.onmouseover = function () {
    clearInterval(set);
    right.style.display = "block";
    left.style.display = "block";
  }

  // 鼠标从图片上移开(轮播重新开始,切换按钮隐藏)
  div.onmouseout = function () {
    set = setInterval(change, 1500);
    right.style.display = "none";
    left.style.display = "none";
  }

  // 切换到上一张
  left.onclick = function () {
    for (var i = 0; i < pic.length; i++) {
      pic[i].style.display = "none";
      item[i].className = "";
    }

    if (index < 0) {
      index = 3;
    }

    pic[index].style.display = "block";
    item[index].className = "on";
    index--;
  }
}

// 切换到下一张
right.onclick = function () {
  for (var i = 0; i < pic.length; i++) {
    pic[i].style.display = "none";
    item[i].className = "";
  }

  if (index > 3) {
    index = 0;
  }

  pic[index].style.display = "block";
  item[index].className = "on";
  index++;
}