看来我的计时器的应用还要加强才行呀

本来想照着网上的效果模拟一个（说来惭愧，我现在除了模仿就是抄），忽然发现我对计时器的应用不是很熟练，本想来面向对象的，可是我觉得还是先联系计时器，增加一下基础知识吧，要不感觉好不给力啊。

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

转载于:https://www.cnblogs.com/busicu/p/3992755.html

看来我的计时器的应用还要加强才行呀相关推荐

深圳垃圾分类告诉你这些都是什么垃圾不仅要会分还要分的准确才行
近年来对于垃圾分类已经多达46个城市开始实行了,说明实行垃圾分类,保护我们赖以生存的自然环境势在必行.而在不同的城市中,垃圾分类的标准可以不一样,在深圳垃圾分类也有属于自己的分类标准,下面就和深圳社 ...
请问台式电扇一、二档启动不了，三档还要用手转下才行，是电容坏了吗？
很大可能是电容器坏了. 缺油,电容坏了,输入电压低,轴承磨损都有可能产生这种问题启动不了,说明是电机的启动转矩不够,而电扇作为单相电机,应该是在电容里面接入电容,使电流从一相变成两相,(原来的电流和 ...
python错误和异常处理怎处理你知道么
异常处理什么是异常? 首先要清楚,什么是异常,异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触 ...
Require.js
前言前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...
python错误-python错误和异常处理怎处理你知道么
原标题:python错误和异常处理怎处理你知道么异常处理什么是异常? 首先要清楚,什么是异常,异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常 ...
安装VM及在VM下安装Ghost XP系统图文教程，附PQ分区及VM共享教程 z
安装VM及在VM下安装Ghost XP系统图文教程,附PQ分区及VM共享教程 z http://blog.sina.com.cn/s/blog_58dae96501000710.html 第一章:安装 ...
mysql delete exists用法_自学MySQL第五天
关于Subqueries复合句,很多时候可以和JOIN形式互相替换,这时就要注意performance和readability,MOSH老师让观看者先注意readability,给出的练习为找出买了p ...
三味Capsule：矩阵Capsule与EM路由
作者丨苏剑林单位丨广州火焰信息科技有限公司研究方向丨NLP,神经网络个人主页丨kexue.fm 事实上,在论文<Dynamic Routing Between Capsules>发布 ...
CodeForces - 1304D Shortest and Longest LIS(构造+贪心)
题目链接:点击查看题目大意:题目给出 n - 1 个大小关系,分别代表一个长度为 n 的数列各个位置的相对大小,现在需要我们用两个符合相对大小关系的 1 ~ n 的一个排列,且该排列的最长不下降子序 ...

看来我的计时器的应用还要加强才行呀

看来我的计时器的应用还要加强才行呀相关推荐

最新文章

热门文章