Javascript学习之创建循环的广告条

    在浏览网页时,我们常常会见到定期切换的广告条。其中一部分是动画GIF文件,这种GIF文件包含许多帧连续播放的图像,其他的是Flash动画。如果希望页面循环显示许多GIF(无论是否是动画),那么可以使用Javascript来实现。

    为什么要用Javascript实现循环广告条,创建一个动画GIF不就行了吗?其中一个原因是,这使你能够在广告条中使用JPEG或PNG,因此图像的质量更好。通过使用这些高质量的图像,可以在广告条中显示照片。

以下是一个创建循环广告条的例子:

HTML及CSS代码:

  
  
  
  
  1. <style type="text/css"> 
  2. .centered { text-align:center;} 
  3. #adBanner { 
  4.     width:400px; 
  5.     height:75px; 
  6.     } 
  7. </style> 
  8.  
  9. <body> 
  10.     <div class="centered"> 
  11.         <img src="images/banner1.gif" id="adBanner" alt="Ad Banner"/> 
  12.     </div> 
  13. </body> 

Javascript代码:

  
  
  
  
  1. <script type="text/javascript"> 
  2.     window.onload = rotate; <!--当窗口加载完成时,触发rotate函数-->
  3.      
  4.     var thisAd = 0
  5.      
  6.     function rotate(){ 
  7.         var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif"); 
  8.          
  9.         thisAd++; 
  10.         if(thisAd == adImages.length){ <!--如果thisAd的值等于adImages数组中成员的数量,将其设置为0,实现循环-->
  11.             thisAd=0
  12.             } 
  13.         document.getElementById("adBanner").src = adImages[thisAd]; 
  14.          
  15.         setTimeout(rotate,3*1000); 
  16.         } 
  17.         <!--HTML DOM setTimeout()方法,用于在指定的毫秒数后调用函数或计算表达式。只执行code一次。--> 
  18.         <!--setTimeout(code,millisec),millisec指定执行code间隔的时间,本例中图像每隔3秒改变一次--> 
  19. </script> 

以上为依次显示的图。

既然是广告,当然需要链接。下面是对代码进行改进,问循环的广告条添加链接

  
  
  
  
  1. <body> 
  2.     <div class="centered"> 
  3.         <a href="linkPage.html"><img src="images/reading1.gif" id="adBanner" alt="Ad Banner"/></a> 
  4.     </div> 
  5. </body> 
  
  
  
  
  1. <script type="text/javascript"> 
  2.     window.onload = initBannerLink
  3.      
  4.     var thisAd = 0
  5.      
  6.     function initBannerLink(){ 
  7.         if(document.getElementById("adBanner").parentNode.tagName == "A"){ 
  8.             document.getElementById("adBanner").parentNode.onclick = newLocation
  9.             } 
  10.         rotate(); 
  11.         } 
  12.          
  13.     function newLocation(){ 
  14.         var adURL = new Array("negrino.com","sun.com","microsoft.com"); 
  15.         document.location.href = "http://www." + adURL[thisAd]; 
  16.         return false; 
  17.         } 
  18.         <!--设置location对象的href属性。location对象表示窗口当前显示的文档的地址,它的href属性存放该文档完整的URL--> 
  19.         <!--返回false,告诉浏览器不应再加载这个href。如果不这样做,浏览器会加载两次这个URL。--> 
  20.         <!--我们已经在Javascript中处理了所有工作,所以不需要再加载href。--> 
  21.                       
  22.     function rotate(){ 
  23.         var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif"); 
  24.          
  25.         thisAd++; 
  26.         if(thisAd == adImages.length){ 
  27.             thisAd=0
  28.             } 
  29.          
  30.         document.getElementById("adBanner").src = adImages[thisAd]; 
  31.          
  32.         setTimeout(rotate,3*1000); 
  33.         } 

然后,点击图片会进入打开不同的页面,比如,点击第三张图,会打开微软中国主页。

 

你可能感兴趣的:(JavaScript,十全十美,广告条)