焦点轮播图

2024-04-27 14:05:59

字体：大中小

来源：转载

供稿：网友

焦点轮播图

<!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.onload=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].onmouSEOver=function(){ isSpeed=-5; } oBtn[1].onmouseover=function(){ isSpeed=5; } oUl.onmouseover=function(){ clearInterval(timer); } oUl.onmouseout=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)

}

上一篇：Javascript变量前缀的命名规范

下一篇：浅谈JS闭包和this关键字