手写无缝轮播$鼠标移入暂停移除轮播

无缝轮播
使用插件Swiper没找到鼠标移入立即暂停功能，需求是并排几张图片无缝滑动，鼠标移入立即停止，鼠标移除立即滚动。
六个展示位，七个内容
html代码

<ul class="div">
		<li style="background-color:#cca6b5">内容一</li>
		<li style="background-color:#1cabba">内容二</li>
		<li style="background-color:#1ffff5">内容三</li>
		<li style="background-color:#1bbbaa">内容四</li>
		<li style="background-color:#1f44b5">内容五</li>
		<li style="background-color:#1f4005">内容六</li>
		<li style="background-color:#17a6b5">内容七</li>
	</ul>

css样式

ul{
			width: 1200px;
			height: 100px;
			list-style: none;
			position: relative;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 0px;
			overflow: hidden;
		}
		li{
			position: absolute;
			top: 0;
			height: 100px;
			width: 200px;
			text-align: center;
			line-height: 100px;
			border-left: 1px solid #f1f1f1;
			cursor: pointer;
		}

js代码
addEventListener前用jquery选择器不知道为什么不起作用，这里直接原生js选取元素

var num = 0;
		var dis = 1;
		for (var i = 0; i < 7; i++) {
			num = 200*i -200 + 'px';
			$('.div').children().eq(i).css('left',num)
		}
		function autoplay(){
			for (var i = 0; i < 7; i++) {
				// 获取每一个元素的相对定位left值
				var leftData = $('.div').children().eq(i).position().left;
				var leftNum = leftData - dis + 'px';
				// 设置元素移动
				 $('.div').children().eq(i).css('left',leftNum);
				 // 判断如果元素超过界限把元素设置在首位
				if(leftData < -200){
					$('.div').children().eq(i).css('left','1200px')
					$('.div').prepend($('.div').children().eq(i));
				}
			}
		}
		// 元素自动轮播
		var interval = setInterval(autoplay,20)
		// 鼠标移入
		document.getElementsByClassName('div')[0].addEventListener('mouseenter',function(event){
    	    clearInterval(interval)
    	});
    	// 鼠标移除
    	document.getElementsByClassName('div')[0].addEventListener('mouseleave',function(event){
    	    interval = setInterval(autoplay,20)
    	});