創建循環的廣告條

RotatingBanner.html 頁面中在循環的廣告條中加載第一個圖像，其他工作交由 JavaScript 來處理。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotating Banner</title>
<script src="RotatingBanner.js"></script>
<link rel="stylesheet" href="banner.css">
</head>

<body>
<div class="centered">
  <img src="images/reading1.gif" id="adBanner" alt="Ad Banner">
</div>
</body>
</html>

RotatingBanner.js 腳本循環顯示圖像。

window.onload = rotate;

//初始值為 0，該變量值能取值0,1,2，和 adImages 數組元素對應
var thisAd = 0;

function rotate(){
  var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif");
  thisAd++;
  if(thisAd == adImages.length){
    thisAd = 0;
  }
  document.getElementById("adBanner").src = adImages[thisAd];
    
  setTimeout(rotate, 2000);
  //指定一個操作多長時間執行一次，這里設置的是2秒
    
}

效果如下:

在循環廣告條中添加鏈接

廣告條常常用來做廣告，而且常常希望在廣告條中建立鏈接，讓訪問者可以通過單擊鏈接進入與廣告相關的站點。

RotatingBannerWithLinks.html 頁面在 <img> 標簽外增加了一個鏈接標簽 <a>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotating Banner with Links</title>
<script src="RotatingBannerWithLinks.js"></script>
<link rel="stylesheet" href="banner.css">
</head>

<body>
<div class="centered">
  <a href="linkPage.html"><img src="images/banner1.gif" id="adBanner" alt="ad banner"></a>
</div>
</body>
</html>

RotatingBannerWithLinks.js 腳本增加了一個數組，這個數組中包含鏈接的地址。

window.onload = initBannerLink;

var thisAd = 0;

function initBannerLink(){
  //檢查 adBanner 是否是包含在 <a> 中
  if(document.getElementById("adBanner").parentNode.tagName == "A"){
        //設置 <a> 的 onclick 事件調用 newLocaton 函數
    document.getElementById("adBanner").parentNode.onclick = newLocation;
  }
  rotate();
}

function newLocation(){
  var adURL = new Array("negrino.com", "sun.com", "microsoft.com");
  document.location.href = "http://www." + adURL[thisAd];
  return false; //不用在加載 href 了，JavaScript 已經處理好了
}

function rotate(){
  var adImages = new Array("images/banner1.gif", "images/banner2.gif", "images/banner3.gif");
  thisAd++;
  if(thisAd == adImages.length){
    thisAd = 0;
  }
  document.getElementById("adBanner").src = adImages[thisAd];
    
  setTimeout(rotate, 2000);
}

效果如下：

www.negrino.com 訪問有些慢。。。

建立循環式幻燈片

Web 站點上的幻燈片每次向用戶顯示一個圖像，並且讓用戶能夠控制顯示圖像的進度（可向前也可向后）。

ImageSlideshow.html 將創建這個幻燈片頁面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Slideshow</title>
<script src="ImageSlideshow.js"></script>
<link rel="stylesheet" href="banner.css">
</head>

<body>
<div class="centered">
  <h1>Welcome, Robot Overlords!</h1>
  <img src="images/robot1.jpg" id="myPicture" width="200" height="400" alt="Slideshow">
  <h2>
    <a href="previous.html" id="prevLink">&lt;&lt; Previous </a>&nbsp;&nbsp;
    <a href="next.html" id="nextLink">Next &gt;&gt;</a>
  </h2>
</div>
</body>
</html>

ImageSlideshow.js 腳本實現單擊鏈接控制圖像的前后切換。

window.onload = initLinks;

var myPix = new Array("images/robot1.jpg", "images/robot2.jpg", "images/robot3.jpg");
var thisPic = 0;

function initLinks(){
  document.getElementById("prevLink").onclick = processPrevious;
  document.getElementById("nextLink").onclick = processNext;
}

function processPrevious(){
  //先判斷，再 -1
  if(thisPic == 0){
    thisPic = myPix.length;
  }
  thisPic--;
  document.getElementById("myPicture").src = myPix[thisPic];
  return false;
}

function processNext(){
  //首先 +1
  thisPic++;
  if(thisPic == myPix.length){
    thisPic = 0;
  }
  document.getElementById("myPicture").src = myPix[thisPic];
  return false;
}

效果如下：

顯示隨機圖像

如果你的站點包含大量圖形，那么可能希望用戶在進入站點的時候從圖像中隨機選擇要顯示的。

RandomImage.html 創建要顯示隨機圖像的頁面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random Image</title>
<script src="RandomImage.js"></script>
<link rel="stylesheet" href="banner.css">
</head>

<body>
<img src="images/spacer.gif" width="305" height="312" id="myPicture" alt="some image">
</body>
</html>

RandomImage.js 腳本隨機從三種毛絨玩具中顯示，主要使用 Math.random 方法生成隨機數。

window.onload = choosePic;

function choosePic(){
  //建立一個包含3個圖像路徑的數組 myPix
  var myPix = new Array("images/lion.jpg", "images/tiger.jpg", "images/bear.jpg");
  //Math.floor 將結果向下取整數， Math.random * myPix.length 將產生 0~3 之間的數，最終也就是 0,1,2
  var randomNum = Math.floor((Math.random() * myPix.length));
  document.getElementById("myPicture").src = myPix[randomNum];    
}

效果如下：

隨機開始循環顯示圖像

如果有許多圖像要顯示，並且不希望每次加載頁面都從同樣的圖像開始，下面的示例結合了循環廣告條和隨機圖像的代碼。

RotatingRandomBanner.html 中有一個 spacer.gif 圖像，用於占位。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotating Random Banner</title>
<script src="RotatingRandomBanner.js"></script>
<link rel="stylesheet" href="banner.css">
</head>

<body>
<div class="centered">
  <img src="images/spacer.gif" id="adBanner" alt="Ad Banner">
</div>
</body>
</html>

RotatingRandomBanner.js 腳本從一個隨機圖像開始循環顯示。

window.onload = choosePic;

var adImages = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif");
var thisAd = 0;

function choosePic(){
  thisAd = Math.floor((Math.random() * adImages.length));
  document.getElementById("adBanner").src = adImages[thisAd];
    
  rotate();    
}

function rotate(){
  thisAd++;
  if(thisAd == adImages.length){
    thisAd = 0;
  } 
  document.getElementById("adBanner").src = adImages[thisAd];
    
  setTimeout(rotate, 2000);
    
}

效果如下：

示例代碼下載

banner.rar

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 利用RecyclerView實現無限輪播廣告條 HTML5 canvas banner廣告編輯插件，canvas畫圖實例 Android無限循環輪播廣告位Banner 影視電影視頻微信小程序源碼-激勵視頻+banner廣告+視頻廣告+插屏廣告淦！為什么到處都是廣告！(一文通俗易懂告訴你需要了解廣告的基礎） HTML5 網頁漂浮窗廣告 JavaScript邏輯 - demo 利用javascript跨域訪問cookie之廣告推廣 JavaScript學習——使用JS完成頁面定時彈出廣告 JavaScript 深入了解對象中的屬性深入了解 JavaScript 中的 for 循環