原生js實現無縫輪播

　　因為要做到無縫，所以就要把第一張圖片和最後一張連接起來，在此處采用js克隆了第一張圖片的節點，添加到最後，顯示圖片序號的小圓按鈕也是使用js動態添加的。

• html部分
  

      <div class="banner" id="banner">
          <ul class="pic" id="pic">
              <li><a href="javascript:void(0)"><img src="images/1.jpg"></a></li>
              <
   
  li><a href="javascript:void(0)"><img src="images/2.png"></a></li>
              <li><a href="javascript:void(0)"><img src="images/3.png"></a></li>
              <li><a href="javascript:void(0)"><img src="images/4.png"></a></li>
              <
   
  li><a href="javascript:void(0)"><img src="images/5.jpg"></a></li>
              <li><a href="javascript:void(0)"><img src="images/6.png"></a></li>
              <li><a href="javascript:void(0)"><img src="images/7.png"></a></li>
          </
   
  ul>
          <ul class="dot" id="dot"></ul>
          <button class="left" id="leftBtn">&lt;</button>
          <button class="right" id="rightBtn">&gt;</button>
      </div>

• css部分
  

         * {
              padding: 0;
              margin: 0;
          }
          .banner {
              width: 1000px;
              height: 600px;
              margin: 0 auto;
              position: relative;
              overflow: hidden;
          }
          ul, li {
              list-style: none;
          }
          .pic {
              height: 600px;
              position: absolute;
              left: 0;
              top: 0;
          }
          .pic li {
              float: left;
          }
          .pic li img {
              width: 1000px;
              height: 600px;
          }
          .dot {
              width: 100%;
              text-align: center;
              font-size: 0;
              position: absolute;
              bottom: 40px;
              left: 0;
          }
          .dot li {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #fff;
              margin: 0 5px;
              cursor: pointer;
          }
          .banner button {
              width: 30px;
              height: 50px;
              background-color: rgba(0, 0, 0, .5);
              border: 0 none;
              color: #fff;
              opacity: .5;
              position: absolute;
              top: 45%;
              cursor: pointer;
              font-size: 24px;
          }
          .left {
              left: 0;
          }
          .right {
              right: 0;
          }

• js部分
  js中有封裝的一些方法，包括查看對象屬性的兼容寫法，動畫函數（該方法實現了height,width,left,top,opacity等屬性的動畫效果），和通過事件冒泡找尋節點的函數；
  

          var leftBtn = document.getElementById("leftBtn");
          var rightBtn = document.getElementById("rightBtn");
          var banner = document.getElementById("banner");
          var pic = document.getElementById("pic");
          var dot = document.getElementById("dot");
          for (var i = 0; i < pic.children.length; i++) {
              var node = document.createElement("LI");
              node.index = i;
              dot.appendChild(node);
          }
          var copy = pic.children[0].cloneNode(true);
          pic.appendChild(copy);
          var width = parseInt(getStyle(pic.children[0], "width"));
          var len = pic.children.length;
          pic.style.width = width * len + "px";
          var index = 0;
          var t;
          function move() {
              if(index == len) {
                  pic.style.left = 0;
                  index = 1;
              }
              if (index == -1) {
                  pic.style.left = -(len - 1) * width + "px";
                  index = len - 2;
              }
              left = -width * index;
              changeDots(index);
              animate(pic, {left, left}, function() {
                  t = setTimeout(function () {
                      index++;
                      if (index == len) {
                          pic.style.left = 0;
                          index = 1;
                      }
                      move();
                  }, 2000);
              });
          }
          move();
          // 為按鈕添加點擊事件
          dot.onclick = function(e) {
              e = e || window.event;
              var target = e.target || e.srcElement;
              target = getTarget(target, "tagName", "LI", this);
              if (target) {
                  clearTimeout(t);
                  index = target.index;
                  changeDots(index);
                  move();
              }
          }
          // 左右按鈕
          leftBtn.onclick = function() {
              clearTimeout(t);
              index--;
              move();
          }
          rightBtn.onclick = function() {
              clearTimeout(t);
              index++;
              move();
          }
          // 改變按鈕顏色
          function changeDots(index) {
              if (index < 0) {
                  index = len;
              }
              if (index == len - 1) {
                  index = 0;
              }
              for (var i = 0; i < len - 1; i++) {
                  dot.children[i].style.backgroundColor = "#fff";
              }
              dot.children[index].style.backgroundColor = "red";
          }
          /**
           * 查看ele對象的type屬性
           * @param {元素對象} ele 
           * @param {屬性} type 
           */
          function getStyle(ele, type) {
              if (ele.currentStyle) {
                  return ele.currentStyle[type];
              } else {
                  return getComputedStyle(ele, null)[type];
              }
          }
          /**
           * 動畫效果
           * @param {元素對象} el 
           * @param {結束條件} endObj 
           * @param {回調函數} cb 
           * @param {時間} time 
           */
          function animate(el, endObj, cb, time) {
              time = time || 200;
              var startObj = {};
              var _startObj = {};
              var speedObj = {};
              for (var i in endObj) {
                  startObj[i] = parseInt(getStyle(el, i));
                  _startObj[i] = startObj[i];
                  speedObj[i] = 16.7 * (endObj[i] - startObj[i]) / time;
              }
              var flag = false;
              clearInterval(el.t);
              el.t = setInterval(function() {
                  for (var j in endObj) {
                      startObj[j] += speedObj[j];
                      if (_startObj[j] < endObj[j] ? startObj[j] >= endObj[j] : startObj[j] <= endObj[j]) {
                          startObj[j] = endObj[j];
                          clearInterval(el.t);
                          flag = true;
                      }
                      if (j == "opacity") {
                          el.style[j] = startObj[j];
                      } else {
                          el.style[j] = startObj[j] + "px";
                      }
                  }
                  if (flag && cb) {
                      cb();
                  }
              }, 16.7);
          }
          /**
           * 找到attr屬性為value的節點
           * @param {目標對象，鼠標點擊對象} target 
           * @param {屬性名} attr 
           * @param {屬性值} value 
           * @param {結束條件} end 
           */
          function getTarget(target, attr, value, end) {
              while (target != end) { //如果鼠標點擊的是end，則直接結束
                  if (target[attr] == value) { //如果點擊的對象的attr屬性值為value，則返回該對象
                      return target;
                  }
                  target = target.parentNode; //否則查找其父節點
              }
          }

原生js實現無縫輪播