焦点轮播图
<!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)
}
}
相关文章
最新发布
阅读排行
热门文章
猜你喜欢