了解 JavaScript （6）– 广告条（Banner)

在 Web 上冲浪时，常常会见到定期在图像之间切换的广告条。我们可以用 JavaScript 来实现，重复循环显示它们。

创建循环的广告条

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秒
    
}

效果如下:

20150908001

在循环广告条中添加链接

广告条常常用来做广告，而且常常希望在广告条中建立链接，让访问者可以通过单击链接进入与广告相关的站点。

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);
}

效果如下：

20150908002

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;
}

效果如下：

20150908003

显示随机图像

如果你的站点包含大量图形，那么可能希望用户在进入站点的时候从图像中随机选择要显示的。

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];    
}

效果如下：

20150908004

随机开始循环显示图像

如果有许多图像要显示，并且不希望每次加载页面都从同样的图像开始，下面的示例结合了循环广告条和随机图像的代码。

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);
    
}

效果如下：

20150908005

示例代码下载

banner.rar

posted on 2015-09-08 11:12  pchmonster  阅读(3079)  评论(0)  编辑  收藏  举报

导航