循环滚动轮播图

HTML

<div id="source">
    <div id="insourse">
      <div id="sourse1">
        <a href="#"><img src="images/01.jpg" alt="img"></a>
        <a href="#"><img src="images/02.jpg" alt="img"></a>
        <a href="#"><img src="images/03.jpg" alt="img"></a>
        <a href="#"><img src="images/04.jpg" alt="img"></a>
        <a href="#"><img src="images/05.jpg" alt="img"></a>
      </div>
      <div id="sourse2"></div>
    </div>
  </div>

CSS

 *{
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    #source{
      width: 840px;
      height: 150px;
      margin: 50px auto 0;
      overflow: hidden;
    }
    #insourse{
      float: left;
      width: 400%;
    }
    #sourse1,#sourse2{
      float: left;
    }
    #source img{
      width: 200px;
      height: 150px;
      border: none;
      margin-right: 10px;
    } 

JS

function $(id){
    return document.getElementById(id);
  }
  var source=$('source'),
      sourse1=$('sourse1'),
      sourse2=$('sourse2');
      // console.log(source)
  var time=null;  //定义计时器
  
  sourse2.innerHTML=sourse1.innerHTML;//克隆sourse1内容到sourse2中
  function marquee(){
    //越界处理
    if(source.scrollLeft<=0){//如果第一组跑完
      source.scrollLeft=sourse2.offsetWidth;// sourse1跑完，接着跑sourse2中的图片
    }else{
      source.scrollLeft--;  //scrollLeft左右滚动，scrollTop上下滚动,若添加控制器则也用此属性修改
      // 按设定的时间，每次减1个像素
    }
  }
  time=setInterval(marquee,10)

  // 鼠标悬停时，将停止轮播
  source.onmouseover = function(){
    clearInterval(time)
  }
  // 鼠标移走时，将继续轮播
  source.onmouseout = function(){
    time=setInterval(marquee,10)
  }