脚本代码：
页面的代码：
![]()
<html>
![]()
<div id="myBanner" style="position:absolute;background-color:#9999CC; top:100px">a</div>
![]()
<script>
![]()
// 实例化一个adBannerRotator对象
![]()
var adb = new adBannerRotator("adb","myBanner",500,200);
![]()
// 给对象增加图片和链接地址
![]()
adb.Append("images/01.jpg","http://www.chinaent.com.cn");
![]()
adb.Append("images/02.jpg","http://www.chinaent.com.cn/Movie");
![]()
adb.Append("images/03.jpg","http://www.chinaent.com.cn/Tv");
![]()
adb.Append("images/04.jpg","http://www.chinaent.com.cn/Ent");
![]()
// 开始切换
![]()
adb.Play();
![]()
</script>
![]()
</html>
一个网站往往会需要多个这样的效果，如果不采用这种面向对象的写法，就必须把上面的JS代码在每个页面上拷贝一份，但是采用面向对象，就只需要以上的6行即可。
1![]()
<script>
2![]()
function adBannerRotator(oId,id,width,height)
3![]()
{
4![]()
this.bannerLink = new Array(); //链接地址
5![]()
this.bannerImg = new Array(); //图片路径
6![]()
7![]()
this.rotatorSpeed = 5; //自动播放的速度（单位：秒）
8![]()
this.bannerNum = 0; //总个数
9![]()
this.currentNum = 0; //当前第几个
10![]()
this.objID = oId; //此对象的实例名
11![]()
this.height = height;
12![]()
this.width = width;
13![]()
14![]()
this.container = document.getElementById(id);
15![]()
this.container_img = "chinaent_container_img";
16![]()
this.container.innerHTML = "<a id='chinaent_container_a' target='_blank'></a><div id='Layer2' style=' position:absolute;width:130px;height:25px;ex:1;left: 390px;top: 178px; filter:alpha(opacity=50);'></div>";
17![]()
18![]()
// 增加
19![]()
this.Append = function(bImg,bLink)
20![]()
{
21![]()
this.bannerLink[this.bannerNum] = bLink;
22![]()
this.bannerImg[this.bannerNum] = bImg;
23![]()
this.bannerNum ++;
24![]()
25![]()
var str = "<IMG id='chinaent_container_button_"+ this.bannerNum +"' src='images/banner_black_"+ this.bannerNum +".gif' border=0 style='cursor:hand' onClick='javascript:"+ this.objID +".Play("+ eval(this.bannerNum-1) +")'/> ";
26![]()
this.container.children[1].innerHTML += str;
27![]()
}
28![]()
29![]()
// 设置切换的时间
30![]()
this.SetTime = function(t)
31![]()
{
32![]()
this.rotatorSpeed = t;
33![]()
}
34![]()
35![]()
// 开始循环自动播放
36![]()
this.Play = function(index)
37![]()
{
38![]()
if(index == null || typeof(index) == "undefined")
39![]()
{
40![]()
if(this.currentNum > this.bannerNum-1)
41![]()
this.currentNum=0;
42![]()
}
43![]()
else
44![]()
{
45![]()
if(index>this.bannerNum-1)
46![]()
this.currentNum = this.bannerNum-1;
47![]()
else if(index < 0)
48![]()
this.currentNum=0;
49![]()
else
50![]()
this.currentNum = index;
51![]()
}
52![]()
53![]()
if(this.container.children[0].children.length == 0)
54![]()
this.container.children[0].innerHTML = "<img style='FILTER:revealTrans(duration=2,transition=20)' height="+ this.height +" width="+ this.width +" border=0 name='chinaent_container_img' src='"+ this.bannerImg[0] +"'/>";
55![]()
56![]()
this.setTransition();
57![]()
document.images[this.container_img].src=this.bannerImg[this.currentNum];
58![]()
this.playTransition();
59![]()
60![]()
// 更改链接地址
61![]()
document.getElementById("chinaent_container_a").href = this.bannerLink[this.currentNum];
62![]()
// 更改导航按钮样式
63![]()
var imgs = this.container.getElementsByTagName("img")
64![]()
for(i=0;i<imgs.length;i++)
65![]()
{
66![]()
if(imgs[i].id == "chinaent_container_button_"+eval(this.currentNum+1))
67![]()
imgs[i].src = imgs[i].src.replace("black","red");
68![]()
else
69![]()
imgs[i].src = imgs[i].src.replace("red","black");
70![]()
}
71![]()
72![]()
this.currentNum ++;
73![]()
74![]()
// 循环调用自动切换效果
75![]()
if(index == null || typeof(index) == "undefined")
76![]()
theTimer=setTimeout(this.objID+".Play()",this.rotatorSpeed*1000);
77![]()
}
78![]()
79![]()
// 下面2个是设置和掉用图片切换效果
80![]()
this.setTransition = function()
81![]()
{
82![]()
if (document.all)
83![]()
{
84![]()
document.images[this.container_img].filters.revealTrans.Transition=Math.floor(Math.random()*23);
85![]()
document.images[this.container_img].filters.revealTrans.apply();
86![]()
}
87![]()
}
88![]()
89![]()
this.playTransition = function()
90![]()
{
91![]()
if (document.all)
92![]()
document.images[this.container_img].filters.revealTrans.play()
93![]()
}
94![]()
}
<script>2
function adBannerRotator(oId,id,width,height)3
{
4
this.bannerLink = new Array(); //链接地址5
this.bannerImg = new Array(); //图片路径6
7
this.rotatorSpeed = 5; //自动播放的速度（单位：秒）8
this.bannerNum = 0; //总个数9
this.currentNum = 0; //当前第几个10
this.objID = oId; //此对象的实例名11
this.height = height;12
this.width = width;13
14
this.container = document.getElementById(id);15
this.container_img = "chinaent_container_img";16
this.container.innerHTML = "<a id='chinaent_container_a' target='_blank'></a><div id='Layer2' style=' position:absolute;width:130px;height:25px;ex:1;left: 390px;top: 178px; filter:alpha(opacity=50);'></div>";17
18
// 增加19
this.Append = function(bImg,bLink)20
{
21
this.bannerLink[this.bannerNum] = bLink;22
this.bannerImg[this.bannerNum] = bImg;23
this.bannerNum ++;24
25
var str = "<IMG id='chinaent_container_button_"+ this.bannerNum +"' src='images/banner_black_"+ this.bannerNum +".gif' border=0 style='cursor:hand' onClick='javascript:"+ this.objID +".Play("+ eval(this.bannerNum-1) +")'/> ";26
this.container.children[1].innerHTML += str;27
}28
29
// 设置切换的时间30
this.SetTime = function(t)31
{32
this.rotatorSpeed = t;33
}34
35
// 开始循环自动播放36
this.Play = function(index)37
{ 38
if(index == null || typeof(index) == "undefined")39
{40
if(this.currentNum > this.bannerNum-1)41
this.currentNum=0;42
} 43
else44
{45
if(index>this.bannerNum-1)46
this.currentNum = this.bannerNum-1;47
else if(index < 0)48
this.currentNum=0;49
else50
this.currentNum = index;51
}52
53
if(this.container.children[0].children.length == 0)54
this.container.children[0].innerHTML = "<img style='FILTER:revealTrans(duration=2,transition=20)' height="+ this.height +" width="+ this.width +" border=0 name='chinaent_container_img' src='"+ this.bannerImg[0] +"'/>";55
56
this.setTransition();57
document.images[this.container_img].src=this.bannerImg[this.currentNum];58
this.playTransition();59
60
// 更改链接地址61
document.getElementById("chinaent_container_a").href = this.bannerLink[this.currentNum];62
// 更改导航按钮样式63
var imgs = this.container.getElementsByTagName("img")64
for(i=0;i<imgs.length;i++)65
{66
if(imgs[i].id == "chinaent_container_button_"+eval(this.currentNum+1))67
imgs[i].src = imgs[i].src.replace("black","red");68
else69
imgs[i].src = imgs[i].src.replace("red","black");70
}71
72
this.currentNum ++;73
74
// 循环调用自动切换效果75
if(index == null || typeof(index) == "undefined")76
theTimer=setTimeout(this.objID+".Play()",this.rotatorSpeed*1000); 77
}78
79
// 下面2个是设置和掉用图片切换效果80
this.setTransition = function()81
{82
if (document.all)83
{84
document.images[this.container_img].filters.revealTrans.Transition=Math.floor(Math.random()*23);85
document.images[this.container_img].filters.revealTrans.apply();86
}87
}88
89
this.playTransition = function()90
{91
if (document.all)92
document.images[this.container_img].filters.revealTrans.play()93
}94
}页面的代码：
<html><div id="myBanner" style="position:absolute;background-color:#9999CC; top:100px">a</div><script>// 实例化一个adBannerRotator对象var adb = new adBannerRotator("adb","myBanner",500,200);// 给对象增加图片和链接地址adb.Append("images/01.jpg","http://www.chinaent.com.cn");adb.Append("images/02.jpg","http://www.chinaent.com.cn/Movie");adb.Append("images/03.jpg","http://www.chinaent.com.cn/Tv");adb.Append("images/04.jpg","http://www.chinaent.com.cn/Ent");// 开始切换adb.Play();</script></html>一个网站往往会需要多个这样的效果，如果不采用这种面向对象的写法，就必须把上面的JS代码在每个页面上拷贝一份，但是采用面向对象，就只需要以上的6行即可。
浙公网安备 33010602011771号