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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
jquery事件与绑定事件
Mar 16 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
基于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
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js 内存释放问题
2010/04/25 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python中logging库的使用总结
2017/10/18 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
浅析python连接数据库的重要事项
2021/02/22 Python
C语言中break与continue的区别
2012/07/12 面试题
Ajax和javascript的区别
2013/07/20 面试题
安全生产先进个人材料
2014/02/06 职场文书
总经理的岗位职责
2014/02/23 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
单位工作证明格式模板
2014/10/04 职场文书
单位接收函格式
2015/01/30 职场文书
详解Redis瘦身指南
2021/05/26 Redis
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python获取字典中某个key的value
2022/04/13 Python