簡單的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]="F200810030934232939618479.jpg";

                            bannerAD[1]="F200810030934241521376481.jpg";

                            bannerAD[2]="F200810030934242127760111.jpg";

                            bannerAD[3]="F200810030934242416320906.jpg";

                            bannerAD[4]="F200810030934242490616851.jpg";

                            bannerAD[5]="F200810030934251813330055.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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章