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数据表格插件
Jul 17 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JS实现留言板功能
Jun 17 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php printf输出格式使用说明
2010/12/05 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
JS前端加密算法示例
2016/12/22 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python多线程抽象编程模型详解
2019/03/20 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
服务生自我鉴定
2014/01/22 职场文书
模范家庭事迹材料
2014/02/10 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
毕业设计致谢词
2015/05/14 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python