JavaScript纯原生实现图片无缝滚动与悬停控制

<!DOCTYPE html>
<html>
<head>
	<title>无缝滚动</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
	#div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
	#div1 ul{position: absolute;left: 0;}
	#div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
	#div1 ul li img{width:100%;}
</style>
<script type="text/javascript">
	window.onload=function(){
		var oDiv=document.getElementById('div1');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		var aA=document.getElementsByTagName('a');//获取向右向左的箭头
		var timer=null;
		var iSpeed=10;
		oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
		oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
		function fnMove(){
			if(oUl.offsetLeft<-oUl.offsetWidth/2){
				oUl.style.left=0;
			}else if(oUl.offsetLeft>0){
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}//定义到边界的时候，实现无缝衔接
			oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
		}
		timer=setInterval(fnMove,30);
		aA[0].onclick=function(){
			iSpeed=-10;
//按下左箭头，定义向左运动
		}
		aA[1].onclick=function(){
			iSpeed=10;
//按下右箭头，定义向右运动
		}
		oDiv.onmouseover=function(){
			clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动
		}
		oDiv.onmouseout=function(){
			timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动
		}
	};
</script>
<body>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" >←</a>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" >→</a>
<div id="div1">
	<ul>
		<li><img src="miaoflash/images/1.jpg"></li>
		<li><img src="miaoflash/images/2.jpg"></li>
		<li><img src="miaoflash/images/3.jpg"></li>
		<li><img src="miaoflash/images/4.jpg"></li>
		<li><img src="miaoflash/images/5.jpg"></li>
		<div style="clear: none;"></div>
	</ul>
</div>
</body>
</html>

class Roll {
  constructor(opts) {
    this.elem = opts.elem; // 图片包含滚动长度的元素的
    this.elemBox = opts.elemBox; //图片展示区域元素，为了获取展示区域的高度
    this.direction = opts.direction;
    this.time = opts.time;
    this.init();
    this.roll = this.roll.bind(this)
    this.startRoll = this.startRoll.bind(this)
    this.stopRoll = this.stopRoll.bind(this)
  }
  init(){
    this.elemHeight = this.elem.offsetHeight;
    this.elemHtml = this.elem.innerHTML;
    this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
    this.speed;
    // 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1
    if(this.direction === 'top' || this.direction === 'left'){
      this.speed = -1;
    }else{
      this.speed = 1;
    }
  }
  roll(){
    switch (this.direction) {
      case "top":
        // 如果滚动的盒子的top值超出元素的高度，则置为0
        if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
          this.elemBox.style.top = 0;
        }else{
          this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
        }
        break;
      case "bottom":
        // 如果滚动的盒子的bottom值超出元素的高度，则置为0
        if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
          this.elemBox.style.bottom = 0;
        }else{
          this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
        }
        break;
      case "left":
        // 如果滚动的盒子的left超出元素的高度，则置为0
        if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
          this.elemBox.style.left = 0;
        }else{
          this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
        }
        break;
      case "right":
        // 如果滚动的盒子的right超出元素的高度，则置为0
        if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
          this.elemBox.style.right = 0;
        }else{
          this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
        }
        break;
      default:
        // 默认向上滚动，如果滚动的盒子的top超出元素的高度，则置为0
        if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
          this.elemBox.style.top = 0;
        }else{
          this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
        }
    }
  }
  stopRoll(){
    clearInterval(this.scrollTimer)
  }
  startRoll(){
    this.scrollTimer = setInterval(this.roll,this.time)
  }
}