为什么只有第一点击的时候有渐隐的效果，我错在哪了？
- HTML code
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css"> *{ margin:0; padding:0;} body{ background:#F5F5F5; font-size:12px;} li{ list-style:none;} .show-pic{ position:relative; width:400px; height:200px; margin:50px auto; background:#fff; overflow:hidden;} .show-pic ul li{ position:absolute; left:0; top:0; width:400px; height:200px; opacity:0; filter:alpha(opacity=0);} .show-pic ol{ position:absolute; bottom:4px; right:0;} .show-pic ol li{ float:left; padding:0 4px; background:#fff; color:#000; margin-right:4px; cursor:pointer;} .show-pic ol li.current{ background:#C30; color:#fff;}</style><script type="text/javascript"> window.onload=function(){ var blockShow=document.getElementById('show_pic'); var picList=blockShow.getElementsByTagName('ul')[0].getElementsByTagName('li'); var navList=document.getElementById('btn').getElementsByTagName('li'); var i=0; var timer=null; //显示隐藏 for(i=0; i<navList.length; i++){ navList[i].index=i; navList[i].onclick=function(){ for(i=0; i<navList.length; i++){ navList[i].className=''; playAnimation(picList[i],0,getCss(picList[i],'opacity')) } this.className='current'; playAnimation(picList[this.index],100,getCss(picList[this.index],'opacity')) }; } //获取样式 function getCss(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } //动画开始 function playAnimation(obj,targetValue,currentValue){ clearInterval(timer); timer=setInterval(function(){ animation(obj,targetValue,currentValue); },30); } //动画效果 function animation(obj,targetValue,currentValue){ var speed=0; var cssValue=parseInt(getCss(obj, 'opacity')*100); if(targetValue==currentValue){ clearInterval(timer); }else{ if(targetValue<currentValue){ speed=-5; }else{ speed=5; } obj.style.opacity=(cssValue+speed)/100; //alert(getCss(obj, 'opacity')); } } }; </script></head><body><div class="show-pic" id="show_pic"> <ul> <li style="opacity:1; filter:alpha(opacity=100);"><img src="images/01.gif" alt=""/></li> <li><img src="images/02.jpg" alt=""/></li> <li><img src="images/03.jpg" alt=""/></li> <li><img src="images/04.jpg" alt=""/></li> <li><img src="images/05.jpg" alt=""/></li> </ul> <ol id="btn"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol></div></body></html>[解决办法]
- HTML code
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>无标题文档</title><style type="text/css"> *{ margin:0; padding:0;} body{ background:#F5F5F5; font-size:12px;} li{ list-style:none;} .show-pic{ position:relative; width:400px; height:200px; margin:50px auto; background:#fff; overflow:hidden;} .show-pic ul li{ position:absolute; left:0; top:0; width:400px; height:200px; opacity:0; filter:alpha(opacity=0);} .show-pic ol{ position:absolute; bottom:4px; right:0; z-index:999;} .show-pic ol li{ float:left; padding:0 4px; background:#fff; color:#000; margin-right:4px; cursor:pointer;} .show-pic ol li.current{ background:#C30; color:#fff;}</style><script type="text/javascript"> window.onload=function(){ var blockShow=document.getElementById('show_pic'); var picList=blockShow.getElementsByTagName('ul')[0].getElementsByTagName('li'); var navList=document.getElementById('btn').getElementsByTagName('li'); var i=0; var timer=null; //显示隐藏 for(i=0; i<navList.length; i++){ navList[i].index=i; (function(i){ navList[i].onclick=function(){ for(i=0; i<navList.length; i++){ navList[i].className=''; playAnimation(picList[i],0,getCss(picList[i],'opacity')) picList[i].style.opacity = 0; picList[i].style.filter = 'alpha(opacity=0)'; } this.className='current'; playAnimation(picList[this.index],100,getCss(picList[this.index],'opacity')) }; })(i); } //获取样式 function getCss(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } //动画开始 function playAnimation(obj,targetValue,currentValue){ clearInterval(timer); timer=setInterval(function(){ animation(obj,targetValue,currentValue); },30); } //动画效果 function animation(obj,targetValue,currentValue){ var speed=0; var cssValue=parseInt(getCss(obj, 'opacity')*100); if(targetValue==currentValue){ clearInterval(timer); }else{ if(targetValue<currentValue){ speed=-5; }else{ speed=5; } obj.style.opacity=(cssValue+speed)/100; obj.style.filter='alpha(opacity='+cssValue+speed+')'; //alert(getCss(obj, 'opacity')); } } }; </script></head><body><div class="show-pic" id="show_pic"> <ul> <li style="opacity:1; filter:alpha(opacity=100);"><img src="http://pica.nipic.com/2008-05-01/20085110421925_2.jpg" alt=""/></li> <li><img src="http://f.imagehost.org/0477/Jiuzhai_01_01_205_1024.jpg" alt=""/></li> <li><img src="http://pic2.nipic.com/20090416/2360114_101830023_2.jpg" alt=""/></li> <li><img src="http://pica.nipic.com/2007-12-24/20071224161811448_2.jpg" alt=""/></li> <li><img src="http://pic4.nipic.com/20090807/3174722_125354079_2.jpg" alt=""/></li> </ul> <ol id="btn"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol></div></body></html>
[解决办法]