网友的图片无缝滚动

网友的图片无缝滚动示例，效果并不是很好

by jun wang

HTML

<div class="box" id="myscroll">
  <ul>
    <li><img src="" alt="图片1" /></li>
    <li><img src="" alt="图片2" /></li>
    <li><img src="" alt="图片3" /></li>
    <li><img src="" alt="图片4" /></li>
    <li><img src="" alt="图片5" /></li>
    <li><img src="" alt="图片6" /></li>
    <li><img src="" alt="图片7" /></li>
    <li><img src="" alt="图片8" /></li>
    <li><img src="" alt="图片9" /></li>
    <li><img src="" alt="图片10" /></li>
    <li><img src="" alt="图片11" /></li>
    <li><img src="" alt="图片12" /></li>
    <li><img src="" alt="图片13" /></li>
    <li><img src="" alt="图片14" /></li>
    <li><img src="" alt="图片15" /></li>
    <li><img src="" alt="图片16" /></li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 600px;
  height: 200px;
  background-color: pink;
  margin: 100px auto;
  overflow: hidden;
  border: 3px solid red;
  position: relative;
}

.box ul {
  width: 400%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.box ul li {
  list-style: none;
  float: left;
}

.box ul li img {
  vertical-align: middle;
}

JavaScript

$(function() {
  var myscroll = document.getElementById("myscroll");
  var myscroll_ul = myscroll.children[0];
  var num = 0; //控制左侧值 left
  var timer = null; //定时器
  timer = setInterval(autoPlay, 10);

  function autoPlay() {
    num--;
    num <= -1200 ? num = 0 : num;
    myscroll_ul.style.left = num + "px";
    myscroll.onmouseover = function() {
      clearInterval(timer); //鼠标经过大盒子 停止定时器timer
    }
    myscroll.onmouseout = function() {
      timer = setInterval(autoPlay, 10); //开启定时器 名字还是叫timer
    }
  }

});