css
*{
margin: 0;
padding: 0;
}
.div1{
list-style: none;
margin: 100px auto;
width: 712px;
height: 108px;
background: red;
position: relative;
overflow: hidden;
}
.div1 ul{
list-style: none;
position: absolute;
left: 0;
top: 0;
}
.div1 ul li{
float: left;
width: 178px;
height: 108px;
}
html
js部分
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aBtn1 = document.querySelector('#btn1')
var aBtn2 = document.querySelector('#btn2')
var timer = null;
var a;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
autoPlay(-5);
function autoPlay(speed){
clearInterval(timer)
timer = setInterval(function(){
if(oUl.offsetLeft <= -oUl.offsetWidth/2){
oUl.style.left=0;
}
else if(oUl.offsetLeft >=0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
a=speed;
},10)
}
oUl.onmouseover=function(){
clearInterval(timer);
}
oUl.onmouseout=function(){
if(a>0){
autoPlay(5);
}
else{
autoPlay(-5);
}
}
aBtn2.onclick=function(){
autoPlay(5);
}
aBtn1.onclick=function(){
autoPlay(-5);
}
