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 相关文章推荐
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
JSONP基础知识详解
Mar 19 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
Vue实现简单计算器
Jan 20 Vue.js
基于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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
jQuery select控制插件
2009/08/17 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
纯python实现机器学习之kNN算法示例
2018/03/01 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
基于python实现KNN分类算法
2020/04/23 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Python如何定义有默认参数的函数
2020/08/10 Python
降低python版本的操作方法
2020/09/11 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
php将xml转化对象的实例详解
2021/11/17 PHP
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
vue实力踩坑之push当前页无效
2022/04/10 Vue.js