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 相关文章推荐
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
微信小程使用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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Django 中 cookie的使用
2017/08/17 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
python多线程与多进程及其区别详解
2019/08/08 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python 实现绘制整齐的表格
2019/11/18 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
商场总经理岗位职责
2014/02/03 职场文书
银行优秀员工事迹
2014/02/06 职场文书
安全宣传标语口号
2014/06/06 职场文书
行为习惯主题班会
2015/08/14 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Python序列化模块JSON与Pickle
2022/06/05 Python