我吃了炫邁做出來的輪播圖，停不下來的那種

一、結構

<div class="box" id="screen">
  <ul>
    <li><img src="http://img.mp.itc.cn/upload/20161107/033dc0a68d084597a0c53d4028fc0cc6.jpeg" alt=""/></li>
    <li><img src="http://img.mp.itc.cn/upload/20161107/848040a29b204269a3b051505c17a59e.jpeg" alt=""/></li>
    <li><img src="http://img.mp.itc.cn/upload/20161107/cec0ebec6056473da336530c8b28b65e.jpeg" alt=""/></li>
    <!--放置了一個假的第一張，為了製作無縫滾動效果-->
    <li><img src="http://img.mp.itc.cn/upload/20161107/033dc0a68d084597a0c53d4028fc0cc6.jpeg" alt=""/></li>
  </ul>
</div>
 

二、樣式

<style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    img {
      vertical-align: top;
    }
    /*取消圖片底部3畫素距離*/
    .box {
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      position: relative;
      overflow: hidden;
    }
    .box ul li {
      float: left;
    }
    .box ul {
      width: 1500px;
      position: absolute;
      left: 0;
      top: 0;
    }
 </style>
 

三、行為

<script>
  //1 獲取元素
  var screen = document.getElementById("screen");//可視區域
  var imgWidth = screen.offsetWidth;//圖片寬度
  var list = screen.children[0];//要運動的ul
  var lisLen = list.children.length;//獲取li的個數
  
  //2.2 設定步長
  var step = -10;
  
  //2 書寫一個簡單運動程式碼
  setInterval(function () {
  //2.1 獲取元素當前位置
  var current = list.offsetLeft;
    
  //2.4 設定需要抽回的條件(當假的第一張顯示完全時設定抽回操作)
  if (current > -(lisLen - 1) * imgWidth) {
    //2.3 計算新的步長，再設定給left屬性即可
    current = current + step;
    list.style.left = current + "px";
  } else {
      //設定抽回操作，為了看起來沒有卡頓，可以抽回到一個step的距離(設定left值為step)
      list.style.left = step + "px";
    }
  }, 40);

 //3 滑鼠移入，讓運動速度減慢
 screen.onmouseover = function () {
   step = -2;
  };
  
  //4 滑鼠移出，將速度還原
  screen.onmouseout = function () {
    step = -10;
  };
</script>