24
2009
09

实用图片js切换代码,图片切换效果,JavaScript图片切换

本人收藏多年的一段js图片切换代码,纯JavaScript,代码简洁规范,效果多变实用,欢迎大家共享。

演示地址:http://www.zhnao.com/images/demo/tupianqiehuan.html

如果想添加图片,在第五行开始添加“ bannerAD[0]="图片绝对或者相对地址"; ”这句代码即可,中括号内的0换成已有数字的下一位,记住不能重复,比如代码中原带的有从0-4的代码,再添加的时候往下写5,6....

<script>
   var bannerAD=new Array();
   var bannerADlink=new Array();
   var adNum=0;
   bannerAD[0]="http://www.zhnao.com/images/demo/1.jpg";  
   bannerAD[1]="http://www.zhnao.com/images/demo/2.jpg";
   bannerAD[2]="http://www.zhnao.com/images/demo/3.jpg";
   bannerAD[3]="http://www.zhnao.com/images/demo/4.jpg";
   bannerAD[4]="http://www.zhnao.com/images/demo/5.jpg";
  var preloadedimages=new Array();
   for (i=1;i<bannerAD.length;i++){
      preloadedimages[i]=new Image();
      preloadedimages[i].src=bannerAD[i];
   }
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);
}
</script>
<table width="310" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="310" height="280" align="center">
            <a href="http://www.zhnao.com" target="_blank"><img alt="赵楠的博客"
      src="http://www.zhnao.com/images/demo/1.jpg" name=bannerADrotator width=310 height=280 vspace="0" border=0 align=top style="FILTER: revealTrans(duration=2, transition=20)"></a>
  <SCRIPT language=JavaScript>nextAd()</SCRIPT>
            </td>
          </tr>
        </table>

« 上一篇下一篇 »

相关文章:

评论列表:

1.去搭配网  2011/4/2 14:53:12 回复该留言
非常棒的代码!谢谢
由 zhnao 于 2011-4-9 13:03:54 最后编辑

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。