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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
UI Events 用户界面事件
Jun 27 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
React Router基础使用
Jan 17 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
微信小程序实现bindtap等事件传参
Apr 08 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中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python实现求特征选择的信息增益
2018/12/18 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python虚拟环境venv用法详解
2020/05/25 Python
python如何从键盘获取输入实例
2020/06/18 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
2014年父亲节活动方案
2014/03/06 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
党日活动总结
2014/05/07 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2014年督导工作总结
2014/11/19 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
python实现简单倒计时功能
2021/04/21 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
python lambda 表达式形式分析
2022/04/03 Python