您所在的位置:小祥子 » 编程 » JavaScript » 正文

焦点轮播图

时间:2015-08-09 编辑:victory_李 来源:CnBlogs

<!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)

}

}

关键词:

相关文章