JS中怎样用setTimeout来实现5张图片不断的轮换显示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片不间断轮显</title>
<style type="text/css">
#asd { width:150px; height:99px;background-image:url("http://img5.nipic.com/2008-12-29/2008122995957609_1.jpg");}
</style>
<script type="text/javascript">
var but =["http://img1.nipic.com/2007-12-03/20071231357626_1.jpg","http://img5.nipic.com/2008-12-10/20081210153613409_1.jpg","http://img2.nipic.com/2008-03-24/200832410444719_1.jpg","http://img5.nipic.com/2008-12-24/20081224182838814_1.jpg","http://img2.nipic.com/2008-01-16/2008116122228195_1.jpg","http://img5.nipic.com/2008-12-29/2008122995957609_1.jpg"];
var z=0;
function fun(){
    if(z == but.length){z=0;}
    document.getElementById("asd").style.background = "url('"+but[z]+"')";
    z++;
    setTimeout("fun()",2000);
    }
</script>
</head>
<body onload="fun()">
<div id="asd"></div>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片不间断轮显</title>
<style type="text/css">
#asd { width:150px; height:99px;background-image:url("http://img5.nipic.com/2008-12-29/2008122995957609_1.jpg");}
</style>
<script type="text/javascript">
var a=0;
var pic=new Array('','','','','');
function show(){
    if(var i=0;i<pic.length;i++)
    document.getElementById("bb").style.src = pic[i];
    a++;
    if(i>4)
     a=0;
    setTimeout("show()",1000);
    }
</script>
</head>
<body onload="fun()">
<div id="bb"></div>
</body>
</html>

<body onload=show()>
<img id=img0 src=1.jpg>
<script>
var i=0;
function show(){
i++;
img0.src=i+'.jpg';
if(i==5)i=0;
setTimeout("show()",1000);
}
</script>

哈哈，这个我可不会。、<script type=text/javascript>
(function(){
　　     var Idx = 0, arg = arguments, Max = arg.length, Img = new Image();
         Img.src = arg[Idx], Img.onload = function(){
　　             Idx ++;
                 Idx < Max ? function(){
                           setTimeout(function(){Img.src = arg[Idx]}, 3);
                 }() : function(){
                           Img = null, Idx = -1;
                           return function(){
                                  var obj = document.createElement("img");
                                  obj.style.cssText = "width:150px; height:99px";
                                  document.body.appendChild(obj),
                                  function(){
                                          Idx = ++ Idx % Max;
                                          obj.src = arg[Idx];
                                          setTimeout(arguments.callee, 3000);
                                  }()
                           }()
                 }()
         }
})
("http://img1.nipic.com/2007-12-03/20071231357626_1.jpg",
"http://img5.nipic.com/2008-12-10/20081210153613409_1.jpg",
"http://img2.nipic.com/2008-03-24/200832410444719_1.jpg",
"http://img5.nipic.com/2008-12-24/20081224182838814_1.jpg",
"http://img2.nipic.com/2008-01-16/2008116122228195_1.jpg",
"http://img5.nipic.com/2008-12-29/2008122995957609_1.jpg");
</script>权当好玩，切勿效尤 ...

曾经做过类似的...<!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>好似贴过几次了已经.....
不过有很多牛人用IE滤镜做出很帅的效果了
我发个简单的献丑了

<html>
  <head>
    <title>dt filter</title>
    <script language="javascript">
      
    </script>
  </head> <body onload="filter()">
      <img id="myimage" src="F001.JPG" width="500" height="350"
        style="filter:alpha();position:absolute;top:10;left:0;">
     </body>
</html>

那就来个幻灯片吧，哈哈：<script type=text/javascript>
(function(){
        var Idx = 0, arg = arguments, Max = arg.length, Img = new Image();
        Img.src = arg[Idx], Img.onload = function(){
　　              Idx ++;
                Idx < Max ? function(){
                        setTimeout(function(){Img.src = arg[Idx]}, 3);
                }() : function(){
                        Img = null, Idx = -1;
                        return function(){
                               var obj = document.createElement("img");
                               obj.style.cssText="width:200px;height:150px;\
                               filter:alpha(opacity=0)";
                               document.body.appendChild(obj),
                               function(){
                                       var T, i = 0;
                                       Idx = ++ Idx % Max;
                                       obj.src = arg[Idx];
                                       T = setInterval(function(){
                                       i > 100 && clearInterval(T)
                                       ||(obj.filters.alpha.opacity = i++)
                                       }, 15);
                                       setTimeout(arguments.callee, 5000);
                               }()
                        }()
                }()
        }
})
("http://img1.nipic.com/2007-12-03/20071231357626_1.jpg",
"http://img5.nipic.com/2008-12-10/20081210153613409_1.jpg",
"http://img2.nipic.com/2008-03-24/200832410444719_1.jpg",
"http://img5.nipic.com/2008-12-24/20081224182838814_1.jpg",
"http://img2.nipic.com/2008-01-16/2008116122228195_1.jpg",
"http://img5.nipic.com/2008-12-29/2008122995957609_1.jpg");
</script>

我用层来说明
把图片保存为 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg(保存于images文件夹中)
<script>
var a = 1;//设置一个计数器
function changePic(){
   if(a > 5){
     a = 1;
   }
   document.getElementById("divOne").innerHTML = "<img src = 'images/"+ a +".jpg'>";//更改层中的图片
   a++;
}function turnChange(){
   setTimeout("changePic()",毫秒数);//这个相当于C#里面的timer
}
</script><body onload = "turnChange()">
   <div id="divOne"><div>
</body>

一、三张图片轮换显示
二、实现思路1、在网页适当位置插入三张带ID名称的图片，例如：
< IMG src="image/1.jpg" style="display:none;" id="div1" border="0">
< IMG src="image/2.gif" style="display:none;" id="div2" border="0">
< IMG src="image/ad-02.jpg" style="display:none;" id="div3" border="0">
每张图片ID号最后加上数字，方便函数调用
2、在页面载入时，调用三张图片轮换显示的函数:onLoad="show();"
3、函数实现的思路：首页定义两个全局变量，NowFrame和MaxFrame；分别表示页面载入时显示的第一张图片及轮换显示的图片张数；其次通过for循环显示每一张图片，并且使其他不显示的图片处于隐藏状态；最后用setTimeout( )函数的定时器功能，间隔一段一间显示下一张图片；最终实现三张图片不间断的轮换显示效果
三、主要的源代码
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>轮换横幅广告</TITLE>
<STYLE type="text/css">
div{font-size:12px;line-height:22px;}
.red {color: #FF0000}
</STYLE><SCRIPT language="JavaScript">
var NowFrame = 1;//图片最先显示第一张
var MaxFrame = 3;//图片一共3张
function show() {
for(var i=1;i<(MaxFrame+1);i++){
if(i==NowFrame)
document.getElementById('div'+NowFrame).style.display =''; //当前图片显示
else
document.getElementById('div'+i).style.display ='none'; //其他的图片隐藏
}
{ if(NowFrame == MaxFrame) //定义下一张显示的图片
NowFrame = 1;
else
NowFrame++;}
theTimer=setTimeout('show()', 3000); //设置定时器，显示下一张显示的图片
}
</SCRIPT>
</HEAD><BODY onLoad="show();">
<DIV align="center">
<IMG src="image/1.jpg" style="display:none;" id="div1" border="0">
<IMG src="image/2.gif" style="display:none;" id="div2" border="0">
<IMG src="image/ad-02.jpg" style="display:none;" id="div3" border="0">
</DIV>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>五张图片轮换广告</TITLE> <SCRIPT language="JavaScript">
                var NowFrame = 1;
var MaxFrame = 5;
function scroll1(d1) {
if(Number(d1)){
clearTimeout(theTimer);  //当触动按扭时，清除计时器
NowFrame=d1;                //设当前显示图片
}
for(var i=1;i<(MaxFrame+1);i++){
if(NowFrame==i){
document.getElementById(NowFrame).style.display='block';   //当前显示图片
}
else
document.getElementById(i).style.display='none';

}
       { if(NowFrame == MaxFrame)   //设置下一个显示的图片
NowFrame = 1;
   else
NowFrame++;}

theTimer=setTimeout('scroll1()', 3000);   //设置定时器，显示下一张图片
}
</SCRIPT>
</HEAD><BODY onLoad="scroll1()">
<DIV><IMG src="image/1.jpg" id="1" style="display:none;">
<IMG src="image/2.jpg" id="2" style="display:none;">
<IMG src="image/3.jpg" id="3" style="display:none;">
<IMG src="image/4.jpg" id="4" style="display:none;">
<IMG src="image/5.jpg" id="5" style="display:none;">
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD><BODY onLoad="show()">
<img src="images/1.jpg" id="imagesId">
</BODY>
</HTML>

调试易

JS中怎样用setTimeout来实现5张图片不断的轮换显示

解决方案 »