通过透明度执行幻灯片_for(var i=0; i<aspan.length;i++){ aspan[i].classn-CSDN博客

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/52925809
<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赋值给now
						tab();//并且调用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重新赋值为0
						now=0;
					}
					tab();
				}
				var time=setInterval(next,5000);
			};
			
function move(obj,json,time_,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)/time_; 
            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{
            	cur=cur+speed;
                obj.style[i]=cur+'px';  
            }  
              
        }  
        if(b){  
            clearInterval(obj.time);  
            if(fn){  
                fn();  
            }  
        }  
    }  
    obj.time=setInterval(dong,time_);  
}
			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>