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 相关文章推荐
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
学习Node.js模块机制
2016/10/17 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python入门篇之文件
2014/10/20 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python设置随机种子实例讲解
2019/09/12 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python过滤序列元素的方法
2020/07/31 Python
详解python的变量缓存机制
2021/01/24 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
党员公开承诺践诺书
2014/03/25 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB