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中的107个基础知识收集整理 推荐
Mar 29 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
VUE中使用Vue-resource完成交互
Jul 21 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
javascript实现扫雷简易版
Aug 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
Zend引擎的发展 [15]
2006/10/09 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
python生成IP段的方法
2015/07/07 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
详解Python用户登录接口的方法
2019/04/17 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
创业计划书六个要素
2013/12/26 职场文书
学生会离职感言
2014/02/11 职场文书
材料加工工程求职信
2014/02/19 职场文书
篮球比赛口号
2014/06/10 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis