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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
JavaScript onclick事件使用方法详解
May 15 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常用数组函数介绍
2014/07/28 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
XML的代替者----JSON
2007/07/21 Javascript
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
详解python深浅拷贝区别
2019/06/24 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
开学寄语大全
2014/04/08 职场文书
班干部演讲稿
2014/04/24 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
学子宴致辞大全
2015/07/27 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL