知识点：
1、scrollLeft属性
2、克隆节点
3、定时器
4、鼠标移入移除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#000;
}
li{
list-style: none;
}
#show{
940px;
height: 450px;
margin: 0 auto;
margin-top: 60px;
/* overflow-x: scroll; */
overflow: hidden;
}
#show #wrap{
7520px;
height: 450px;
}
#show #wrap ul{
3760px;
height: 450px;
float: left;
}
#show #wrap ul>li{
float: left;
}
</style>
</head>
<body>
<div id="show">
<div id="wrap">
<ul>
<li><img src="./images/a.jpg" alt=""></li>
<li><img src="./images/c.jpg" alt=""></li>
<li><img src="./images/b.jpg" alt=""></li>
<li><img src="./images/d.jpg" alt=""></li>
</ul>
<!-- <ul>
<li><img src="./images/a.jpg" alt=""></li>
<li><img src="./images/c.jpg" alt=""></li>
<li><img src="./images/b.jpg" alt=""></li>
<li><img src="./images/d.jpg" alt=""></li>
</ul> -->
</div>
</div>
</body>
<script>
var show = document.getElementById('show');
var ul = document.querySelector('ul');
var wrap = document.getElementById('wrap');
var ulWidth = ul.offsetWidth;
console.log(ulWidth);
//克隆ul并追加到wrap
wrap.appendChild(ul.cloneNode(true));
//设置无缝轮播的步径
var step = 1;
//设置轮播标志
var run;
//将无缝轮播封装为一个函数
function autoRun(){
run = setInterval(function(){
var newScroolLeft = show.scrollLeft + step;
if(newScroolLeft >= ulWidth){
newScroolLeft = 0;
}
show.scrollLeft = newScroolLeft + step;
},20);
}
//设置页面进入初始化
autoRun();
//鼠标移入停止轮播
show.onmouseenter = function(){
clearInterval(run);
}
//鼠标离开继续轮播
show.onmouseleave = function(){
autoRun();
}
</script>
</html>