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 html 静态页面传参数
Apr 10 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
小程序云开发之用户注册登录
May 18 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
JS常见内存泄漏及解决方案解析
May 30 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/03/04 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
公务员诚信承诺书
2014/05/26 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
基于angular实现树形二级表格
2021/10/16 Javascript
详解flex:1什么意思
2022/07/23 HTML / CSS