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
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现网站最上边可关闭的浮动广告条代码

    js实现网站最上边可关闭的浮动广告条代码

    本文实例讲述了js实现网站最上边可关闭的浮动广告条.分享给大家供大家参考.具体如下: 这是一款广告条代码,平时浮动在网站最上边,可关闭,设计唯美简洁,带关闭按钮,自适应网页宽度,色调明了,相信有不少朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-clase-able-adv-codes/ 具体代码如下: <html> <head> <title>网站页首可关闭广告条</ti

  • javascript实现循环广告条效果

    本文实例为大家分享了javascript实现循环广告条的具体代码,供大家参考,具体内容如下 html代码: <!DOCTYPE html> <html> <head> <title>Rotating Banner</title> <script src="script07.js"></script> <link rel="stylesheet" href="scrip

  • JavaScript实现圆形进度条效果

    JavaScript实现圆形进度条效果

    本文实例为大家分享了JavaScript实现圆形进度条效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

  • JavaScript实现简单进度条效果

    本文实例为大家分享了JavaScript实现进度条效果的具体代码,供大家参考,具体内容如下 效果图: 简单说一下思路: 主要就是进度条的宽度的动态调整!要用到JS的间隔定时器 setInterval( ) setInterval( ) 功能:每隔指定时间调用一次函数 参数:函数,时间间隔 返回值:定时器编号(数字) 想让它到一定的宽度就停止,那么需要设定它的最大宽度,在它外面套一个有宽度的元素就可以啦!这样的话控制它在父元素里的百分比就行了. 在函数里进行判断是否道达指定宽度,没有到达就增长,否

  • Javascript+CSS3实现进度条效果

    Javascript+CSS3实现进度条效果

    进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下: 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性. Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下: .xx {clip:rect(<top>, <right>,

  • javascript+css实现进度条效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 主要是以样式实现进度条的效果,JavaScript控制显示的百分比 html模板 <div class="progress_area"> <span id="progress" class="progress_bac"></span> </div> <input type="button"

  • jQuery实现广告条滚动效果

    本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0px;margin: 0px;} #list{width: 150px;height: 310px;margin: 0px auto;bor

  • Android自定义控件之广告条滚动效果

    Android自定义控件之广告条滚动效果

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

  • javascript实现淘宝幻灯片广告展示效果

    javascript实现淘宝幻灯片广告展示效果

    本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }

  • Javascript实现飞动广告效果的方法

    本文实例讲述了Javascript实现飞动广告效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • 使用JavaScript实现点击循环切换图片效果

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

随机推荐