<!DOCTYPE html>
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/index.css" type="text/css"/> <script src="../js/index.js"></script></head><body><div id="div1"> <ul id="ul1"><li id="li1"><img src="../img/001e4f9d7c110e6a5d3f23.jpg"/></li><li><img src="../img/01300000253822122579134330076.jpg"/></li><li><img src="../img/mp24124528_1437707648418_16.jpeg"/></li><li><img src="../img/Q3e8C5t6kH6RKjw4IOG1NFzX5KxV96ic3BLkotCYKsZMW5nMTLdOwQ7F9hCwdQ3CW08OABoib6ficGI31U6RprN7w.jpg"/></li><li><img src="../img/TVJpR7cV1RzTeHfePL6WQTVibhLRmEXvwYg4Egrx8icKzk2vnIGpQaAMhduyicH5UakevxyulzWjSzGWvSVGiarkSw.jpg"/></li> </ul> </div><input type="button" value="向左" id="btn1"/><input type="button" value="向右" id="btn2"/></body></html>
*{margin:0px;padding:0px}
img{width:400px;height:200px}#ul1 li{list-style: none;float:left;margin-left:14px}#div1{position:absolute;top:180px;left:140px;width:1256px;height:200px;overflow:hidden}#ul1{position:absolute;top:0px;left:0px}input{width:80px;height:40px;color:#ffff00;font-family:"方正喵呜体";font-size:18px}
#btn1{position:absolute;left:60px;top:260px}#btn2{position:absolute;right:60px;top:260px}
/**
* Created by Jack's on 2015/8/9. */window.οnlοad=function (){ var aLi=document.getElementsByTagName("li"); var oUl=document.getElementById("ul1"); var oBtn=document.getElementsByTagName("input"); var isSpeed=-5; var timer=null; oUl.style.width=aLi[0].offsetWidth*aLi.length*2+140+"px"; oUl.innerHTML+=oUl.innerHTML;timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+isSpeed+"px"; if(oUl.offsetLeft<-oUl.offsetWidth/2+140){ oUl.style.left='140px';}
else if(oUl.offsetLeft>140){ oUl.style.left=-oUl.offsetWidth/2+140+"px"; }},30)
oBtn[0].οnmοuseοver=function(){ isSpeed=-5; } oBtn[1].οnmοuseοver=function(){ isSpeed=5; } oUl.οnmοuseοver=function(){ clearInterval(timer); } oUl.οnmοuseοut=function(){ timer=setInterval(function(){ oUl.style.left=oUl.offsetLeft+isSpeed+"px"; if(oUl.offsetLeft<-oUl.offsetWidth/2+140){ oUl.style.left='140px';}
else if(oUl.offsetLeft>140){ oUl.style.left=-oUl.offsetWidth/2+140+"px"; }},30)
}
}