<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width: 712px;
height: 108px;
margin:100px auto;
background: #F60;
position:relative;
overflow:hidden;
}
ul{
position:absolute;
left:0px;
top:0px;
}
ul li{
float:left;
list-style:none;
width: 178px;
background: #AFA;
}
</style>
</head>
<body>
<input type="button" value="左边" id="left">
<input type="button" value="右边" id="right">
<div id="box">
<ul id="oul">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
</div>
<div id="b"></div>
</body>
<script>
var oBox = document.getElementById('box');
var oUl = document.getElementById('oul');
var oLi = document.getElementsByTagName('li');
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi.length*oLi[0].offsetWidth+"px"
var time=null;
var speed = 1
function setget(){
time=setInterval(function(){
oUl.style.left=oUl.offsetLeft+speed+"px"
if(parseInt(oUl.style.left)<-(oUl.offsetWidth/2)){
oUl.style.left=0
}
if(parseInt(oUl.style.left)>0){
// alert("123")
oUl.style.left=-(oUl.offsetWidth/2)+"px"
}
console.log(parseInt(oUl.offsetWidth/2))
},30)
}
oBox.onmouseover=function(){
clearInterval(time);
}
oBox.onmouseout=function(){
setget();
}
oLeft.onclick=function(){
return speed = -speed
}
oRight.onclick=function(){
return speed = Math.abs(speed);
}
setget();
</script>
</html>
