用原生js实现轮播图自适应

一些说明

这是我根据网上的一位大牛分享的代码进行了一些改动，这是大牛的分享：http://www.cnblogs.com/LIUYANZUO/p/5679753.html
因为客户需求，我需要让轮播图宽度为100%，并且随着浏览器视窗的改变而改变，即需要达到宽度自适应的效果
写博客主要是为了防止自己长时间不用而忘记，另外也想给同是小白的朋友们一些可供参考的资料，我已经给出了全部代码，希望需要的朋友可以跟着手敲一遍，更好理解，js代码都有注释，如果还是不懂得可以去看看那位大牛写的，非常详细并且易懂

html部分

<div id="container">
    <div id="list" style="left: -600px;">
      <a href="http://www.baidu.com"><img class="img" src="image/5.jpg" alt="5"></a>
      <a href="http://www.baidu.com"><img class="img" src="image/1.png" alt="1"></a>
      <a href="http://www.baidu.com"><img class="img" src="image/2.jpg" alt="2"></a>
      <a href="http://www.baidu.com"><img class="img" src="image/3.jpg" alt="3"></a>
      <a href="http://www.baidu.com"><img class="img" src="image/4.jpg" alt="4"></a>
      <a href="http://www.baidu.com"><img class="img" src="image/5.jpg" alt="5"></a>
      <a href="http://www.baidu.com"><img class="img" src="image/1.png" alt="1"></a>
    </div>
    <div id="buttons">
      <span index="1" class="on"></span>
      <span index="2"></span>
      <span index="3"></span>
      <span index="4"></span>
      <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"></a>
    <a href="javascript:;" id="next" class="arrow"></a>
  </div>

css代码

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
body {
  text-align: center;
  position: relative;
  min-width: 800px;
  overflow: -Scroll;
  overflow-x: hidden;
}

ul li {
  list-style: none;
}

#container {
  position: relative;
  width: 100%;
  height: 760px;
  overflow: hidden;
}
#list {
  position: absolute;
  z-index: 1;
  width: 700%;
  height: 760px;
}
#list img {
  float: left;
  height: 100%;
}
#buttons {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 20px;
  z-index: 2;
  height: 10px;
}
#buttons span {
  float: left;
  margin: 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #999;
  cursor: pointer;
}
#buttons .on {
  background: rgb(216, 219, 0);
}
.arrow {
  position: absolute;
  top: 50%;
  margin-top: -40px;
  z-index: 2;
  display: none;
  width: 60px;
  height: 96px;
  cursor: pointer;
}
#container:hover .arrow {
  display: block;
}
#prev {
  left: 20px;
  background-image: url('../image/pre.png');
  background-repeat: no-repeat;
}
#next {
  right: 20px;
  background-image: url('../image/next.png');
  background-repeat: no-repeat;
}

js代码

 window.onload = function () {
      var list = document.getElementById("list");
      var next = document.getElementById("next");
      var prev = document.getElementById("prev");

      // 初始化图片的宽度和第一张图片的位置
      var imgWidth = document.body.clientWidth;
      var img = document.getElementsByClassName('img');
      for (let i = 0; i < img.length; i++) {
        img[i].style.width = imgWidth + 'px';
      }
      list.style.left = -imgWidth + 'px';

      window.onresize = function () { // 实时监听浏览器窗口大小
        imgWidth = document.body.clientWidth;
        for (let i = 0; i < img.length; i++) {
          img[i].style.width = imgWidth + 'px';
        }
        list.style.left = -imgWidth + 'px';
      }

      function animate (offset) {
        // 获取的style.left是字符串，需要用parseInt()取整转化为数字**********是否要取负值
        var newLeft = parseFloat(list.style.left) + offset;
        if (newLeft < -imgWidth * 5) {
          list.style.left = -imgWidth + "px";
        } else if (newLeft > -imgWidth) {
          list.style.left = -imgWidth * 5 + "px";
        } else {
          list.style.left = newLeft + "px";
        }
      }

      // 设置图片循环滚动
      var timer;
      function play () {
        timer = setInterval(function () {
          next.onclick();
        }, 2000)
      }
      play();

      // 鼠标放在图片上时图片停止滚动     这里，我们需要对其DOM进行操作，所以需要获取整个轮播图区域
      var container = document.getElementById('container');
      function stop () {
        clearInterval(timer);
      }
      container.onmouseover = stop;
      container.onmouseout = play;


      // 以上一个简单的轮播图做完了，接下来给轮播图加上一排小圆点
      var buttons = document.getElementById("buttons").getElementsByTagName("span");
      var index = 1;
      function buttonsShow () {
        // 这里需要清除之前的样式
        for (var i = 0; i < buttons.length; i++) {
          if (buttons[i].className === "on") {
            buttons[i].className = '';
          }
        }
        // 数组从0开始，故index需要-1
        buttons[index - 1].className = 'on';
      }
      prev.onclick = function () {
        index -= 1;
        if (index < 1) {
          index = 5;
        }
        buttonsShow();
        animate(imgWidth);
      }
      next.onclick = function () {
        // 由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
        index += 1;
        if (index > 5) {
          index = 1;
        }
        buttonsShow();
        animate(-imgWidth);
      }


      // 现在实现鼠标点击任意一个点，切换到相应的图片，原理是通过偏移量去找到对应的图片
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
          // 偏移量获取：这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法
          // 由于这里的index是自定义属性，需要用到getAttribute()这个DOM 2级方法，去获取自定义index的属性
          var clickIndex = parseInt(this.getAttribute('index'));
          var offset = imgWidth * (index - clickIndex);
          animate(offset); // 存放鼠标点击后的位置，用于小圆点的正常显示
          index = clickIndex;
          buttonsShow();
        }
      }
    }