首页 > 代码库 > 看来我的计时器的应用还要加强才行呀
看来我的计时器的应用还要加强才行呀
本来想照着网上的效果模拟一个（说来惭愧，我现在除了模仿就是抄），忽然发现我对计时器的应用不是很熟练，本想来面向对象的，可是我觉得还是先联系计时器，增加一下基础知识吧，要不感觉好不给力啊。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>幻灯片</title><style type="text/css">* {margin:0;padding:0;}body {font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;}ul, li {list-style:none;}img {border:0;display:block;width:100%;}#focus {width:1200px;height:300px;overflow:hidden;margin:0 auto;margin:100px auto;position:relative;}#focus ul{ height:280px;}#focus ul li {display:block;position:absolute;}.a {width:600px;height:210px;left:0;top:20px;z-index:1;}.b {width:700px;height:245px;left:100px;top:10px;z-index:2}.c {width:800px;left:200px;top:0;z-index:3}.d {width:700px;height:245px;left:400px;top:10px;z-index:2}.e {width:600px;height:210px;left:600px;top:20px;z-index:1;}.indexNum{ height:20px; text-align:center;}.indexNum a{ display:inline-block; width:15px; background:#990; height:15px; margin:5px 2px 0 2px;;}.indexNum a.cur{ background:#6F3;}</style><script type="text/javascript"></script></head><body><div id="focus"> <ul> <li class="c"><img src="img/03.jpg" /></li> <li class="d"><img src="img/04.jpg" /></li> <li class="e"><img src="img/05.jpg" /></li> <li class="a"><img src="img/01.jpg" /></li> <li class="b"><img src="img/02.jpg" /></li> </ul></div></body></html><script type="text/javascript">var o=document.getElementById("focus");var aLi=o.getElementsByTagName("li");var timer=null;var aBtnWrap=document.createElement("div");aBtnWrap.className="indexNum";for(var i=0;i<aLi.length;i++){ var aBtn=document.createElement("a"); aBtnWrap.appendChild(aBtn);}o.appendChild(aBtnWrap);var aBtn=o.getElementsByTagName("div")[0].getElementsByTagName("a");var arr=[];var key=0;aBtn[key].className="cur";for(var i=0;i<aLi.length;i++){ aLi[i].style.cssText="top:"+creatJson(aLi[i]).top+"px;left:"+creatJson(aLi[i]).left+"px;width:"+creatJson(aLi[i]).width+"px;height:"+creatJson(aLi[i]).height+"px;z-index:"+creatJson(aLi[i]).zIndex; aLi[i].removeAttribute("class",""); arr.push(creatJson(aLi[i]));}for(var i=0;i<aLi.length;i++){ aBtn[i].index=aLi[i].index=i; aBtn[i].onclick=aLi[i].onclick=function(){ key=this.index; switchs(key) }}function switchs(key){ var t=[]; for(c=0;c<aBtn.length;c++){ aBtn[c].className=""; } aBtn[key].className="cur"; //制造新数组并且运动交换位置 for(z=0;z<aLi.length;z++){ if(key==aLi.length){ key=0; } t[key]=arr[z]; key++; } for(q=0;q<aLi.length;q++){ move(aLi[q],t[q]) }}function auto(){clearInterval(timer);timer=setInterval(function(){ key++; if(key==aLi.length){ key=0; } switchs(key);},1000)}o.onmouseover=function(){ clearInterval(timer);}o.onmouseout=function(){ auto()}auto()//制作json数据function creatJson(obj){ var Json={}; Json.top=parseInt(getcss(obj,"top")); Json.left=parseInt(getcss(obj,"left")); Json.width=parseInt(getcss(obj,"width")); Json.height=parseInt(getcss(obj,"height")); Json.zIndex=parseInt(getcss(obj,"zIndex")); return Json;}//运动框架，不包含透明度function move(obj,json,fn){ clearInterval(obj.timer)obj.timer=setInterval(function(){ obj.bstop=true; for(i in json){ if(i=="zIndex"){ obj.style.zIndex=json[i]; }else{ var pos=parseInt(getcss(obj,i)); var speed=pos>json[i]?Math.floor(((json[i]-pos)/5)): Math.ceil(((json[i]-pos)/5)); obj.style[i]=speed+pos+"px"; if(parseInt(getcss(obj,i))!=json[i]){ obj.bstop=false; } } } if(obj.bstop){ clearInterval(obj.timer); fn && fn(); }},30)} //获取计算后的样式function getcss(obj,attr){ return (obj.currentStyle||getComputedStyle(obj, false))[attr]; }</script>
看来我的计时器的应用还要加强才行呀
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。