设置图片在网页中的时间变换
<!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=utf-8" />
<title>图片效果 </title>
</head>
<body>
<style>
.a1{ FILTER: alpha(opacity=100); width:100%; height:100%}
.a2{ FILTER: alpha(opacity=90); width:80%; height:80%}
.a3{ FILTER: alpha(opacity=80); width:70%; height:70%}
.a4{ FILTER: alpha(opacity=70); width:60%; height:60%}
.a5{ FILTER: alpha(opacity=60); width:50%; height:50%}
.a6{ FILTER: alpha(opacity=50); width:40%; height:40%}
.a7{ FILTER: alpha(opacity=40); width:30%; height:30%}
.a8{ FILTER: alpha(opacity=30); width:20%; height:20%}
.a9{FILTER: alpha(opacity=20); width:10%; height:10%}
.a10{ FILTER: alpha(opacity=0); width:0; height:0}
</style>
<body>
<div id="fu">
<div style="POSITION: relative; width:100px; height:100px" id="banner" >
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style=" POSITION: absolute; DISPLAY: none " /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
<a href="#"> <img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0" style="Z-INDEX: 4; POSITION: absolute; DISPLAY: none" /> </a>
</div>
</div>
<a href="#" onclick="(fu.style.display=='none')?fu.style.display='block':fu.style.display='none';" >隐藏或显示 </a>
</body>
<script>
var banner=document.getElementById("banner");//获得父容器
var img=banner.getElementsByTagName("IMG");//得到容器下的IMG
var i=0;//标记当前展示的IMG
displayFlag=true;//标记最外层容器是否被隐藏
function checkDisplay(obj){//循环banner的父元素，有任意一层隐藏则退出方法
while(obj.parentNode.tagName!="BODY"){
obj=obj.parentNode;
if(obj.style!=null)
if(obj.offsetWidth==0||obj.style.display=="none"||obj.style.visibility=="hidden"){
var imagesss=document.getElementById("banner").getElementsByTagName("IMG");
for(var fr=0;fr <imagesss.length;fr++){
imagesss[fr].style.visibility="hidden";
}
return displayFlag=false;
}
else
return displayFlag=true;
}
}
function change(){
img=banner.getElementsByTagName("IMG");//得到容器下的IMG
c=1;//定义className
var t=null;//定义计时器
t=setInterval(function(){
checkDisplay(banner);//运行前先判断一次是否被隐藏
if(c==10||!displayFlag)//一次循环结束，或者被隐藏了，则清空计时器
{
return clearInterval(t);//同时退出方法
}
if(c!=9)//目前只10个样式，循环到9则结束
{
img[i].className="a"+c;//定义新的CLASSNAME
img[i].style.display='inline';//把图片定义为显示状态
img[i].style.visibility='visible';
img[i].style.left=banner.offsetWidth - img[i].offsetWidth;//将图片居右
}
else{
img[i].style.left=0;//此时要隐藏图片，先将图片居左
img[i].className="a1";//再还原CLASSNAME
img[i].style.display="none";//最后隐藏
img[i].style.visibility='hidden';
}
if(i==img.length-1){//当图片循环到最后一张时的处理
img[0].style.left=0;
img[0].style.display="inline";//控制第1个图片显示
img[0].style.visibility='visible';
img[0].className="a"+(10-c);//定义第1个图片的CLASSNAME
}
else{
//否则改变i的下一张图片
img[i+1].style.left=0;
img[i+1].style.display="inline";
img[i+1].style.visibility='visible';
img[i+1].className="a"+(10-c);
}
c++;//样式标记
},100);//0。1秒变动一次
i++;
if(i>=img.length){//循环到最后一张则将i归0
i=0;
}
}
change();
setInterval(change,2000);//计时器
</script>
<!--图片变换效果结束-->
</body>
</html>
