本文实例为大家分享了js轮播图的具体实现代码，供大家参考，具体内容如下
CSS：
body {
background: #eee;
}
BigBox {
width: 720px;
height: 420px;
border: 1px solid #333;
margin: 60px auto; }
Box {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
top: 10px;
left: 10px; }
Ul {
height: 400px;
position: absolute;
top: 0;
left: 0; }
Ul li {
width: 700px;
height: 400px;
float: left; }
Left {
width: 60px;
height: 50px;
border-radius: 30%;
background: rgba(96,96,.5);
position: absolute;
top: 50%;
left: 0;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
cursor: pointer;
font-size: 20px;
display: none; }
Right {
width: 60px;
height: 50px;
border-radius: 30%;
background: rgba(96,.5);
position: absolute;
top: 50%;
right: 0;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
cursor: pointer;
font-size: 20px;
display: none; }
html：
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
js：
//鼠标移入停止滚动
oDiv.onmouSEOver = function() {
Left.style.display = 'block'
Right.style.display = 'block'
clearInterval(timer3)
clearInterval(timer2)
timer2 = setInterval(function() {
if (n % oDivWidth == 0) {
clearInterval(timer)
clearInterval(timer1)
}
},30)
}
//鼠标移出继续执行
oDiv.onmouSEOut = function() {
Left.style.display = 'none'
Right.style.display = 'none'
clearInterval(timer3)
clearInterval(timer2)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
},2000)
}
//向左
Left.onclick = function() {
//清除所有定时器
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
timer = setInterval(function() {
n -= 50;
oUl.style.left = n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer)
}
if (n <= -oUlWidth / 2) {
oUl.style.left = 0;
n = 0;
}
},30)
}
//向右
Right.onclick = function() {
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
if (n == 0) {
n = -oUlWidth / 2
}
clearInterval(timer)
timer = setInterval(function() {
n += 50;
oUl.style.left = n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer)
}
},30) }
}
