了解 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秒 }
效果如下:
在循环广告条中添加链接
广告条常常用来做广告，而且常常希望在广告条中建立链接，让访问者可以通过单击链接进入与广告相关的站点。
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"><< Previous </a>
<a href="next.html" id="nextLink">Next >></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);
}
效果如下：
示例代码下载
了解 JavaScript （6）– 广告条（Banner)的更多相关文章
- Unity3d Android程序嵌入Admob广告条
原地址:http://dong2008hong.blog.163.com/blog/static/4696882720140441353482/ Seems like using a simple A ...
- 利用RecyclerView实现无限轮播广告条
代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...
- 【转】Android循环滚动广告条的完美实现，封装方便，平滑过渡，从网络加载图片，点击广告进入对应网址
Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...
- JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- Android中使用ViewPager实现广告条
我们在使用电商或视频的手机客户端时,通常会看到广告条的效果.在网上搜索时才知道使用的是ViewPager,于是自己也做了一个Demo. 以下是效果图: 图中包括背景图片.文字描述以及白点. 其中Vie ...
- android自定义控件之滚动广告条
在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看 ...
- 自定义控件（视图）2期笔记03：自定义控件之使用系统控件（优酷案例之广告条Viewpager）
1.首先我们看看运行效果,如下: 2. 下面就是详细实现这个效果的过程: (1)新建一个Android工程,命名为"广告条的效果",如下: (2)这里用到一个控件ViewPager ...
- ViewPaper实现轮播广告条
使用V4包中的viewPaper组件自己定义轮播广告条效果. 实现viewpaper的滑动切换和定时自己主动切换效果. 上效果图 布局文件 <RelativeLayout xmlns:andro ...
- Android仿淘宝头条滚动广告条
之前我使用TextView+Handler+动画,实现了一个简单的仿淘宝广告条的滚动,https://download.csdn.net/download/qq_35605213/9660825: 无 ...
随机推荐
- 使用PreTranslateMessage替代钩子函数处理键盘消息
2002年左右,我所在公司在开发基于H.323的VoIP电话系统(用了以色列一家公司的库,具体名字忘记了). 去电信科技研究院测试系统,同事发现处理键盘消息总有一些莫名其妙的问题,比如延迟或异常. 我 ...
- [Chapter 3 Process]Practice 3.8: Describe the differences among short-term, medium-term, long-term scheduling
3.8 Describe the differences among short-term, medium-term, and longterm scheduling. 答案: 长期调度决定哪些进程进 ...
- 关于在xml文件中的 error: invalid symbol: 'switch' 错误
在xml布局文件中使用Switch控件时,出现error: invalid symbol: 'switch'报错,代码如下: <Switch android:id="@+id/swit ...
- Mysql 复合键索引性能
数据库的常见的索引一般是单个字段,如果多个字段的组合,那么就组成了复合索引.对于组合索引,如果 对其中一字段做为条件查询,会出现什么情况呢? 一.例子 mysql> show create ta ...
- Python3学习(2)-中级篇
Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 切片:取数组.元组中的部分元素 L=['Jack','Mick','Leon','Jane','A ...
- C++网络编程 Java网络编程
C++ MFC C++ STL C++ 模板 C++ DLL C++ OpenGL C++ OSG C++ GIS (GRASS QGIS POSTGRE GDAL/OGR) ____________ ...
- C2第四次作业解题报告
看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...
- [转]mysql binlog in realtime
原文:http://guweigang.com/blog/2013/11/18/mysql-binlog-in-realtime/ 众所周知,MySQL是最受欢迎的互联网数据库(没有之一)—————— ...
- Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2（OData终结点）
前言 很久没更新博客了,加上刚过年,现在准备重新开战,继续自己的学习之路.本文已同步到Web API2系列文章中http://www.cnblogs.com/aehyok/p/3446289.html ...
- 基于 IdentityServer3 实现 OAuth 2.0 授权服务数据持久化
最近花了一点时间,阅读了IdentityServer的源码,大致了解项目整体的抽象思维.面向对象的重要性; 生产环境如果要使用 IdentityServer3 ,主要涉及授权服务,资源服务的部署负载的 ...