描述：轮播图会自动循环播放图片，当用户是鼠标放在图片上的时候，图片会停止循环，当用户鼠标离开的时候，会继续循环播放图片。下面的方框也会随着轮播图的播放而对应的发生改变，鼠标经过谁的时候，就会显示对应的图片。
注意：图片要换成自己的哦，注意更改图片的大小哦。
示例图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带有定时器的无缝滚动</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
/*#arr {display: none;}*/
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='all'>
<div class="screen" id="screen">
<ul id="ul">
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol></ol>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</div>
</body>
</html>
<script>
//1.获取相关元素。
var box = document.getElementById("all");
var ul = box.children[0].children[0];
var ol = box.children[0].children[1];
var ulLiArr = ul.children;
//2.补齐相互盒子
//1.复制第一张图片所在的li，填入所在的ul中。
var newLi = ulLiArr[0].cloneNode(true);
ul.appendChild(newLi);
//2.生成相关的ol中的li。
for(var i=0;i<ulLiArr.length-1;i++){
var newOlLi = document.createElement("li");
newOlLi.innerHTML = i+1;
ol.appendChild(newOlLi);
}
//3.点亮第一个ol中的li。
var olLiArr = ol.children;
ol.children[0].className = "current";
//3.鼠标放到小方块儿上，轮播图片。
for(var i=0;i<olLiArr.length;i++){
olLiArr[i].index = i;
olLiArr[i].onmouseover = function () {
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[this.index].className = "current";
animate(ul,-this.index*ul.children[0].offsetWidth);
key = square = this.index;
}
}
//4.添加定时器。
var timer = null;
var key = 0;
var square = 0;
timer = setInterval(autoPlay,1000);
function autoPlay(){
key++;
square++;
if(key>olLiArr.length){
key=1;
ul.style.left = 0;
}
animate(ul,-key*ul.children[0].offsetWidth);
square = square>olLiArr.length-1?0:square;
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[square].className = "current";
}
//5.鼠标移开开启定时器，鼠标放上去开启定时器。
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(autoPlay,1000);
}
//6.左右切换的按钮。
var btnArr = box.children[0].children[2].children;
btnArr[0].onclick = function () {
key--;
square--;
if(key<0){
key=4;
ul.style.left = -5*ul.children[0].offsetWidth + "px";
}
animate(ul,-key*ul.children[0].offsetWidth);
square = square<0?olLiArr.length-1:square;
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className = "";
}
olLiArr[square].className = "current";
}
btnArr[1].onclick = function () {
autoPlay();
}
// 基本封装
function animate(obj,target) {
clearInterval(obj.timer);
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft;
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) <= 15) {
obj.style.left = target + "px";
clearInterval(obj.timer);
}
},10);
}
</script>