javascript实现循环广告条效果
时间:2019-04-11
本文章向大家介绍javascript实现循环广告条效果,主要包括javascript实现循环广告条效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Ubuntu 17.04 编译安装 Nginx 1.9.9 配置 https 免费证书
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- Docker Image 解决镜像无法删除的问题
- Docker Hub 仓库使用,及搭建 Docker Registry
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- Docker 容器操作
- Ubuntu 17.04 x64 安装 Docker CE 初窥 Dockerfile 部署 Nginx
- 基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
- WebView 的 input 上传照片的兼容问题
- 在 Linux 上搭建Jekyll静态博客
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- 网易严选 App 感受 Weex 开发
- MBR勒索木马再度来袭:GoldenEye分析
- Docker Compose 1.18.0 之服务编排详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 习题9-4 查找书籍
- 浙大版《C语言程序设计(第3版)》题目集 习题9-5 通讯录排序
- 浙大版《C语言程序设计(第3版)》题目集 习题7-5 找鞍点
- 浙大版《C语言程序设计(第3版)》题目集 练习5-1 求m到n之和
- 手把手教你用Python爬取快递100查询你的物流信息
- 浙大版《C语言程序设计(第3版)》题目集 练习5-2 找两个数中最大者
- 浙大版《C语言程序设计(第3版)》题目集 练习5-3 数字金字塔
- 浙大版《C语言程序设计(第3版)》题目集 习题5-1 符号函数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-2 使用函数求奇数和
- 浙大版《C语言程序设计(第3版)》题目集 习题5-3 使用函数计算两点间的距离
- 浙大版《C语言程序设计(第3版)》题目集 习题5-4 使用函数求素数和
- Linux进程之如何查看进程详情?
- 浙大版《C语言程序设计(第3版)》题目集 习题5-5 使用函数统计指定数字的个数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-6 使用函数输出水仙花数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-7 使用函数求余弦函数的近似值