<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#move{
height: 108px;
width: 712px;
/* border: 1px solid red;*/
margin: 50px auto;
position: relative;
background-color: green;
overflow: hidden;
cursor: pointer;
}
ul{
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
height: 108px;
width: 178px;
list-style: none;
}
li img{
width: 100%;
height: 100%;
}
a{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
a.a1{left:0;}
a.a2{right:0;}
</style>
</head>
<body>
<div id="move">
<a class="a1" href="javascript:;"><向左</a>
<ul>
<li><img src="images/0.jpg"/></li>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
</ul>
<a class="a2" href="javascript:;">>向右</a>
</div>
<script>
var oMove = document.getElementById('move');
var oUl = oMove.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var oA =oMove.getElementsByTagName('a');
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = oLi[0].offsetWidth * oLi.length +'px';
var timer =null;
var speed = 4;
var move = function () {
if(oUl.offsetLeft< -oUl.offsetWidth/2){
oUl.style.left = 0;
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2 +'px';
}
oUl.style.left = oUl.offsetLeft + speed +'px';
}
timer = setInterval(move,30);
oA[0].onclick =function () {
speed = -4;
}
oA[1].onclick =function () {
speed = 4;
}
oMove.onmouseover =function (ev) {
clearInterval(timer);
}
oMove.onmouseout = function (ev) {
timer =setInterval(move,30);
}
</script>
</body>
</html>
效果图: