通过透明度执行幻灯片

来源：互联网发布：mysql的触发器编辑：程序博客网时间：2024/05/24 05:04

<script type="text/javascript">window.onload=function(){var oBox=document.getElementById('box');//找到需要用到的元素var aLi=oBox.getElementsByTagName('li');var oUl=document.getElementById('ul');var oNumber=document.getElementById('number');var aSpan=oNumber.getElementsByTagName('span');var now=0;oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//动态设置ul的长度，优点是方便以后修改for(var i=0;i<aSpan.length;i++){//对span进行一个循环，aSpan[i].index=i;//给每一个span设置一个index属性。aSpan[i].onclick=function(){//当鼠标单击对应的span的时候now=this.index;//将此时的index赋值给nowtab();//并且调用tab函数}}function tab(){for(var i=0;i<aSpan.length;i++){aSpan[i].className='';//清空span所有的类名}aSpan[now].className='active';//将当前点击的span添加类名for(var i=0;i<aSpan.length;i++){move(aLi[i],{opacity:0});//调用move函数（前面已经分析过move函数运动框架）if(aLi[i].style.opacity==0){//当li的透明度变为0的时候，将他隐藏掉aLi[i].style.display='none';}}aLi[now].style.display = 'block';//当前的li先显示出来，然后在慢慢改变他的透明度。if(aLi[now].style.display == 'block') {move(aLi[now], {opacity:100});}}function next(){now++;//定时器每执行一次，now每次加一if(now==aSpan.length){//当定时器等于span的个数时，now重新赋值为0now=0;}tab();}var time=setInterval(next,5000);};function move(obj,json,fn){clearInterval(obj.time);function dong(){var b=true;for(var i in json){var cur=0;if(i=='opacity'){cur=Math.round(parseFloat(getstyle(obj,i))*100);}else{cur=parseInt(getstyle(obj,i));}var speed=(json[i]-cur)/25;speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);if(cur!=json[i]){b=false;}if(i=='opacity'){cur=cur+speed;obj.style.opacity=cur/100;obj.style.filter='alpha(opacity:'+cur+')';}else{obj.style[i]=speed+'px';}}if(b){clearInterval(obj.time);if(fn){fn();}}}obj.time=setInterval(dong,30);}function getstyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}}</script>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box{position: relative;width: 470px;height: 150px;border: 1px solid deeppink;margin: 250px 0 0 400px;}#ul{list-style: none;position: absolute;}#ul li{float: left;width: 470px;height: 150px;position: absolute;top: 0;left: 0;display: none;opacity: 0;filter: 0;}img{width: 470px;height: 150px;}#number{position: absolute;z-index: 100;top: 120px;left: 180px;}#number span{display: block;float: left;width: 20px;height: 20px;border: 1px solid pink;border-radius: 20px;}.active{background-color: yellow;}</style></head><body><div id="box"><ul id="ul"><li style="display: block;opacity: 1;"><img src="../img/10.jpg" style="opacity: 1;filter: 100;" /></li><li><img src="../img/13.jpg" /></li><li><img src="../img/14.jpg" /></li><li><img src="../img/15.jpg" /></li><li><img src="../img/16.jpg" /></li></ul><ul id="number"><span class="active"></span><span></span><span></span><span></span><span></span></ul></div></body></html>

0 0