javascript实现循环广告条效果


Posted in Javascript onDecember 12, 2017

本文实例为大家分享了javascript实现循环广告条的具体代码,供大家参考,具体内容如下

html代码:

<!DOCTYPE html>
<html>
<head>
<title>Rotating Banner</title>
<script src="script07.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<div class="centered">
<img src="images/reading1.gif" id="adBanner" alt="Ad Banner">
</div>
</body>
</html>

css代码:

body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;
}
h1, th {
font-family: Georgia, "Times New Roman",Times, serif;
}
h1 {
font-size: 28px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 2px #666 solid;
text-align: center;
width: 20%;
}
#free, .pickedBG {
background-color: #f66;
}
.winningBG {
background-image:url(images/redFlash.gif);
}

js代码:

window.onload = rotate;
var thisAd = 0;
function rotate() {
var adImages = new Array("images/ reading1.gif","images/reading2. gif","images/reading3.gif");
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("adBanner").src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);//设置时间,本每隔多长时间改变广告条中的GIF
}

在循环广告条中添加链接:修改js的代码

window.onload = initBannerLink;
var thisAd = 0;
function initBannerLink() {
if (document.getElementById("adBanner").parentNode.tagName == "A") {
document.getElementById("adBanner").parentNode.onclick = newLocation;
}
rotate();
}
function newLocation() {
var adURL = new Array("negrino.com","sun.com","microsoft.com");
document.location.href = "http://www." + adURL[thisAd];
return false;
}
function rotate() {
var adImages = new Array("images/ reading1.gif","images/reading2. gif","images/reading3.gif");
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("adBanner").src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);//设置时间,本每隔多长时间改变广告条中的GIF
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 #Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 #Javascript
C#实现将一个字符转换为整数
Dec 12 #Javascript
vue2.0 和 animate.css的结合使用
Dec 12 #Javascript
实例分析JS与Node.js中的事件循环
Dec 12 #Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 #Javascript
JS中精巧的自动柯里化实现方法
Dec 12 #Javascript
You might like
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python自动扫雷实现方法
2015/07/25 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python 全文检索引擎详解
2017/04/25 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
什么是python的函数体
2020/06/19 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
商务助理岗位职责
2013/11/13 职场文书
读书活动实施方案
2014/03/10 职场文书
岗位工作说明书
2014/07/29 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
导游词之吉林吉塔
2019/11/11 职场文书