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

}

效果如下:

在循环广告条中添加链接

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

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

了解 JavaScript （6）– 广告条（Banner)的更多相关文章

  1. Unity3d Android程序嵌入Admob广告条

    原地址:http://dong2008hong.blog.163.com/blog/static/4696882720140441353482/ Seems like using a simple A ...

  2. 利用RecyclerView实现无限轮播广告条

    代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...

  3. 【转】Android循环滚动广告条的完美实现，封装方便，平滑过渡，从网络加载图片，点击广告进入对应网址

    Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...

  4. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  5. Android中使用ViewPager实现广告条

    我们在使用电商或视频的手机客户端时,通常会看到广告条的效果.在网上搜索时才知道使用的是ViewPager,于是自己也做了一个Demo. 以下是效果图: 图中包括背景图片.文字描述以及白点. 其中Vie ...

  6. android自定义控件之滚动广告条

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看 ...

  7. 自定义控件（视图）2期笔记03：自定义控件之使用系统控件（优酷案例之广告条Viewpager）

    1.首先我们看看运行效果,如下: 2. 下面就是详细实现这个效果的过程: (1)新建一个Android工程,命名为"广告条的效果",如下: (2)这里用到一个控件ViewPager ...

  8. ViewPaper实现轮播广告条

    使用V4包中的viewPaper组件自己定义轮播广告条效果. 实现viewpaper的滑动切换和定时自己主动切换效果. 上效果图 布局文件 <RelativeLayout xmlns:andro ...

  9. Android仿淘宝头条滚动广告条

    之前我使用TextView+Handler+动画,实现了一个简单的仿淘宝广告条的滚动,https://download.csdn.net/download/qq_35605213/9660825: 无 ...

随机推荐

  1. NDK开发之引用(局部引用，全局引用，虚全局引用)

    1.先引出我遇到的一个问题(我觉得先写问题,这样印象更深刻一点): Android Java层在调用本地jni代码的时候, 会维护一个局部引用表(最大长度是512), 一般jni函数调用结束后, jv ...

  2. shell 脚本注意事项

    设脚本名为test.sh 第一行应该为#! /bin/bash 1.运行和调试的结果是不一样的 调试 sh -x test.sh  这时在计算两个数的和sum=$[$a+$b]时得到sum=3+4,而 ...

  3. c# 框架学习（nop ）总结-------删除功能

    删除直接使用(框架中以封装好的) 控制中写就可以啦 public ActionResult Delete(int id) { //权限位置(若需要的话)var individual = _indivi ...

  4. [[4], [5, 6, 7]]（Python）list的方法

    现在我们要学习一些Python的数据结构了,本节将主要学习列表(list)的用法 1.list的方法 list.append(x) 在list的末尾添加一个元素 >>> a=[1,2 ...

  5. App lifecycle（UWP深入学习一）

    https://msdn.microsoft.com/en-us/library/windows/desktop/br211474.aspx Launching, resuming, and back ...

  6. Linux-TFTP之用于网络远程安装

    TFTP:Trival File Transfer Protocol,简单文件传输协议.是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的文件传输服务. ...

  7. Linux 查杀进程

    ps -eaf |grep "stoporder.php" | grep -v "grep"| awk '{print $2}'|xargs kill -9 # ...

  8. JMeter入门

    下载及安装 下载地址:http://jmeter.apache.org/download_jmeter.cgi 直接下载Release版本,解压即可使用 MAC.Linux中直接运行:jmeter文件 ...

  9. 【转】Android 当打开“开发者模式”中的“不保留活动”后，程序应当怎么保持正常运行

    当打开这个设置以后,程序的Activity会自动销毁,每次返回的时候就会不断重oncreate,此时伴随的问题多多. 参考文档:http://www.bubuko.com/infodetail-960 ...

  10. 如何优化cocos2d程序的内存使用和程序大小：第一部分

    译者: 在我完成第一个游戏项目的时候,我深切地意识到“使用cocos2d来制作游戏的开发者们,他们大多会被cocos2d的内存问题所困扰”.而我刚开始接触cocos2d的时候,社区里面的人们讨论了一个 ...