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 相关文章推荐
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
js查找节点的方法小结
Jan 13 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 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
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php源码的安装方法和实例
2019/09/26 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python基础教程之循环介绍
2014/08/29 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python实现字符串和数字拼接
2020/03/02 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
菜篮子工程实施方案
2014/03/08 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
婚前协议书怎么写
2014/04/15 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
个人授权委托书范文
2014/09/21 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
赞助商致辞
2015/07/30 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers