JavaScript实现的多个图片广告交替显示效果代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了JavaScript实现的多个图片广告交替显示效果代码。分享给大家供大家参考。具体如下:

这里演示JavaScript让多个Banner图片广告交替显示的效果,如果你的站很牛,广告位被占满了,你可以考虑让多个图片广告轮番交替显示,链接也跟着变,这样是不是为你节省了宝贵的广告位?思路是好,但不知道广告效果是不是也一样好,这就需要实验了。

运行效果截图如下:

JavaScript实现的多个图片广告交替显示效果代码

在线演示地址如下:

具体代码如下:

<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 = "https://3water.com/"; //initial URL
urlArray[0] = "https://3water.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程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 #Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 #Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
You might like
php5 图片验证码实现代码
2009/12/11 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
为数据添加append,remove功能
2006/10/03 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python selenium如何设置等待时间
2016/09/15 Python
python发送邮件实例分享
2017/07/28 Python
python设置值及NaN值处理方法
2018/07/03 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
成教自我鉴定
2013/10/27 职场文书
青奥会口号
2014/06/12 职场文书
单位租房协议范本
2014/12/03 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
详解Python为什么不用设计模式
2021/06/24 Python