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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
node.js的事件机制
2017/02/08 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
一些Solaris面试题
2015/12/22 面试题
销售文员岗位职责
2013/11/29 职场文书
设计总监岗位职责
2013/12/07 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
教师演讲稿开场白
2014/08/25 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
结婚纪念日感言
2015/08/01 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
使用python创建股票的时间序列可视化分析
2022/03/03 Python
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS