日期：2014-05-16 浏览次数：20367 次
<!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>
