JavaScript實現(xiàn)的多個圖片廣告交替顯示效果代碼

更新時間：2015年09月04日 15:24:31 作者：企鵝

這篇文章主要介紹了JavaScript實現(xiàn)的多個圖片廣告交替顯示效果代碼,涉及javascript數(shù)組遍歷及頁面元素動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)的多個圖片廣告交替顯示效果代碼。分享給大家供大家參考。具體如下：

這里演示JavaScript讓多個Banner圖片廣告交替顯示的效果，如果你的站很牛，廣告位被占滿了，你可以考慮讓多個圖片廣告輪番交替顯示，鏈接也跟著變，這樣是不是為你節(jié)省了寶貴的廣告位？思路是好，但不知道廣告效果是不是也一樣好，這就需要實驗了。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-npic-cha-adv-style-codes/

具體代碼如下：

<html>
<head>
<title>圖片廣告交替顯示</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var urlArray = new Array(3); 
var banArray = new Array(3); 
var counter = 1;
var url = "http://www.dhdzp.com/"; //initial URL
urlArray[0] = "http://www.dhdzp.com/";
urlArray[1] = "http://www.baidu.com/";
urlArray[2] = "http://www.163.com/";
if(document.images) 
{
 for(i = 0; i < 3; i++)
 {
  banArray[i] = new Image(200, 60);
  banArray[i].src = "images/wall_s" + (i+1) + ".jpg";
 }
}
function changeBanner() 
{
 if(counter > 2)
  counter = 0;
 document.banner.src = banArray[counter].src; //sets a new banner
 url = urlArray[counter]; 
 counter++; 
}
var timer = window.setInterval("changeBanner()", 3000);
//-->
</script>
</head>
<body>
<a href="#" onClick="window.open(url,'BannerWin');">
<img src="images/wall_s1.jpg" width=200 height=60 border=0 
name="banner"></a>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript的列表切換【實現(xiàn)代碼】
下面小編就為大家?guī)硪黄猨avascript的列表切換【實現(xiàn)代碼】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。
2016-05-05
layui(1.0.9)文件上傳upload,前后端的實例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Javascript中return的使用與閉包詳解
Javascript中return與閉包對大家來說應(yīng)該都不陌生，下面本文就給大家介紹了Javascript中return的使用與閉包。文中給出了詳細(xì)的示例代碼，對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，感興趣的朋友們下面來一起看看吧。
2017-01-01
js中Map和Set的用法及區(qū)別實例詳解
map和set一樣是關(guān)聯(lián)式容器,它們的底層容器都是紅黑樹,區(qū)別就在于map的值不作為鍵,鍵和值是分開的,下面這篇文章主要給大家介紹了關(guān)于js中Map和Set的用法及區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-02-02
JS事件添加和移出的兼容寫法示例
這篇文章主要介紹了JS事件添加和移出的兼容寫法,結(jié)合實例形式分析了javascript針對不同瀏覽器實現(xiàn)實現(xiàn)添加與移除事件的相關(guān)技巧與使用方法,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
微信小程序?qū)崿F(xiàn)左右聯(lián)動
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
ComboBox（下拉列表框）通過url加載調(diào)用遠(yuǎn)程數(shù)據(jù)的方法
這篇文章主要介紹了ComboBox（下拉列表框）通過url加載調(diào)用遠(yuǎn)程數(shù)據(jù)的方法 ,需要的朋友可以參考下
2017-08-08
Electron 打包問題:electron-builder 下載各種依賴出錯(推薦)
這篇文章主要介紹了Electron 打包問題：electron-builder 下載各種依賴出錯,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-07
原生js基于canvas實現(xiàn)一個簡單的前端截圖工具代碼實例
這篇文章主要介紹了原生js基于canvas實現(xiàn)一個簡單的前端截圖工具代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-09-09
點擊按鈕彈出模態(tài)框的一系列操作代碼實例
這篇文章主要介紹了js彈出模態(tài)框方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03