多张图片切换效果js代码

网站建设

在一个网页中的一个table里添加几张图片,用js实现图片切换的效果。

做法如下:

再HTML中设置一个table

<table width="535" height="215" border="0" cellpadding="0" cellspacing="0">

              <tr>

                            <td width="450" height="215">

                            <script language=JavaScript> //js代码               

                            var bannerAD=new Array(); //用于存放图片路径(相对路径)

                            var adNum=0;        

                            bannerAD[0]="imgs/ad1.jpg";

                            bannerAD[1]="imgs/ad2.jpg";

                            bannerAD[2]="imgs/ad3.jpg";

                            bannerAD[3]="imgs/ad4.jpg";

                            bannerAD[4]="imgs/ad5.jpg";

                            bannerAD[5]="imgs/ad6.jpg";    

                            function setTransition(){

                                          if (document.all){

                                          bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);//设置图片切换

                                                        bannerADrotator.filters.revealTrans.apply(); //应用图片切换

                                          }

                            }            

                            function playTransition(){

                                          if (document.all)

                                                        bannerADrotator.filters.revealTrans.play() //播放图片

                            }            

                            function nextAd(){

                                          if(adNum<bannerAD.length-1)adNum++;

                                          else adNum=0;

                                          setTransition();

                                          document.images.bannerADrotator.src=bannerAD[adNum];

                                          playTransition();

                                          theTimer=setTimeout("nextAd()", 5000); //5秒钟切换一张图片

                            }                          

                            </script>                            

                           <img style="FILTER: revealTrans(duration=2,transition=20)" height=292 src="" width=515 border=1 name=bannerADrotator>

                            <SCRIPT language=JavaScript>nextAd()</SCRIPT>

                            </td>

              </tr>

</table>

继续阅读