网站首页图片动态更换显示【Javascript】

以前写过一篇网站首页图片动态更换显示【Flash】，主要是介绍了一下网站首页常见的图片新闻更换程序。今天上网发现一个用Javascript脚本写的，效果也很是不错，来看一下：

跟Flash版的几乎一样，看一下代码吧，主要是JS：

<html>
2

<head>
3

<style>

DIV.dLocBBS {

}{ PADDING-LEFT: 17px; FLOAT: left; PADDING-BOTTOM: 3px; WIDTH: 20.2%; PADDING-TOP: 3px }
4

.ImgChange1 {

}{ FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 100%; LINE-HEIGHT: 20px; TEXT-ALIGN: center }
5

.LinkTD{

}{ padding-top:10px;padding-right:20px;}
6

</style>
7

</head>
8

<div class="ImgChange1" id="focusPic1" style="display:block">
9

<a href="http://www.8spaces.com/bbs/40100/20414.html" target="_blank"><img width="370" height="222" border="0" alt="加州私人海滩随拍,美女眼花缭乱,应接不暇" src="http://www.8spaces.com/hpic/2007/6/1/b438669d-c8be-4ebd-ac53-c2748a6103b7.jpg" /><br /></a>
10

<a href="http://www.8spaces.com/bbs/40100/20414.html" target="_blank">加州私人海滩随拍,美女眼花缭乱,应接不暇</a>
11

<table width="98.5%" border="0" cellpadding="0" cellspacing="1" align="center" style="margin:auto;clear:both;">
12

<tr align="center">
13

<td bgcolor="#ebebeb"> </td>
14

<td width="26" style="color:#FFFFFF;" bgcolor="#0049A5">1</td>
15

<td width="26" bgcolor="#9EC9EC" style="cursor:pointer" onclick="javascript:setFocus1(2)" onmouseover="this.style.color='#FFFFFF';this.style.backgroundColor='#0049A5'" onmouseout="this.style.color='#004AA7';this.style.backgroundColor='#9EC9EC'">2</td>
16

<td width="26" bgcolor="#9EC9EC" style="cursor:pointer" onclick="javascript:setFocus1(3)" onmouseover="this.style.color='#FFFFFF';this.style.backgroundColor='#0049A5'" onmouseout="this.style.color='#004AA7';this.style.backgroundColor='#9EC9EC'">3</td>
17

<td width="26" bgcolor="#9EC9EC" style="cursor:pointer" onclick="javascript:setFocus1(4)" onmouseover="this.style.color='#FFFFFF';this.style.backgroundColor='#0049A5'" onmouseout="this.style.color='#004AA7';this.style.backgroundColor='#9EC9EC'">4</td>
18

<td width="26" bgcolor="#9EC9EC" style="cursor:pointer" onclick="javascript:setFocus1(5)" onmouseover="this.style.color='#FFFFFF';this.style.backgroundColor='#0049A5'" onmouseout="this.style.color='#004AA7';this.style.backgroundColor='#9EC9EC'">5</td>
19

</tr>
20

</table>
21

</div>
22

<div class="ImgChange1" id="focusPic2" style="display:none">
23

<a href="http://www.8spaces.com/bbs/40101/19941.html" target="_blank"><img width="370" height="222" border="0" alt="梦寻香港电影拍摄场地，香港新况小记" src="http://www.8spaces.com/hpic/2007/6/1/e79b8456-fcb2-4e14-b48c-a8b7f9f2757d.jpg" /><br /></a>
24

<a href="http://www.8spaces.com/bbs/40101/19941.html" target="_blank">梦寻香港电影拍摄场地，香港新况小记</a>
25

<table width="98.5%" border="0" cellpadding="0" cellspacing="1" align="center" style="margin:auto;clear:both;">
26

<tr align="center">
27

<td bgcolor="#ebebeb"> </td>
28

<td width="26" bgcolor="#9EC9EC" style="cursor:pointer" onclick="javascript:setFocus1(1)" onmouseover="this.style.color='#FFFFFF';this.style.backgroundColor='#0049A5'" onmouseout="this.style.color='#004AA7';this.style.backgroundColor='#9EC9EC'">1</td>
29

<td width="26" style="color:#FFFFFF;" bgcolor="#0049A5">2</td>
30

</tr>
34

</table>
35

</div>
36

<div class="ImgChange1" id="focusPic3" style="display:none">
37

<a href="http://www.8spaces.com/bbs/40103/20367.html" target="_blank"><img width="370" height="222" border="0" alt="北美车展花拍，看外国车展之差异" src="http://www.8spaces.com/hpic/2007/6/1/141e1dc0-1f70-48a3-83a0-5ffc1abc43fc.jpg" /><br /></a>
38

<a href="http://www.8spaces.com/bbs/40103/20367.html" target="_blank">北美车展花拍，看外国车展之差异</a>
39

<table width="98.5%" border="0" cellpadding="0" cellspacing="1" align="center" style="margin:auto;clear:both;">
40

<tr align="center">
41

<td bgcolor="#ebebeb"> </td>
42

<td width="26" style="color:#FFFFFF;" bgcolor="#0049A5">3</td>
45

</tr>
48

</table>
49

</div>
50

<div class="ImgChange1" id="focusPic4" style="display:none">
51

<a href="http://www.8spaces.com/bbs/40103/20462.html" target="_blank"><img width="370" height="222" border="0" alt="传统民俗图文详解，你知道的有几个？" src="http://www.8spaces.com/hpic/2007/6/1/6a9b1fc2-baf7-4772-b903-6a7b8bab7b6b.jpg" /><br /></a>
52

<a href="http://www.8spaces.com/bbs/40103/20462.html" target="_blank">传统民俗图文详解，你知道的有几个？</a>
53

<table width="98.5%" border="0" cellpadding="0" cellspacing="1" align="center" style="margin:auto;clear:both;">
54

<tr align="center">
55

<td bgcolor="#ebebeb"> </td>
56

<td width="26" style="color:#FFFFFF;" bgcolor="#0049A5">4</td>
60

</tr>
62

</table>
63

</div>
64

<div class="ImgChange1" id="focusPic5" style="display:none">
65

<a href="http://www.8spaces.com/bbs/40101/19714.html" target="_blank"><img width="370" height="222" border="0" alt="五月世界新闻图片精选,静观世界前亭落燕" src="http://www.8spaces.com/hpic/2007/6/1/2bfe9a5b-53de-45fa-89b9-8dec9c0ecdf6.jpg" /><br /></a>
66

<a href="http://www.8spaces.com/bbs/40101/19714.html" target="_blank">五月世界新闻图片精选,静观世界前亭落燕</a>
67

<table width="98.5%" border="0" cellpadding="0" cellspacing="1" align="center" style="margin:auto;clear:both;">
68

<tr align="center">
69

<td bgcolor="#ebebeb"> </td>
70

<td width="26" style="color:#FFFFFF;" bgcolor="#0049A5">5</td>
75

</tr>
76

</table>
77

</div>
78

var nn;
80

nn=2;
81

setTimeout('change_img()',2000);
82

function change_img()
83

{
84

if(nn>5) nn=1
85

setTimeout('setFocus1('+nn+')',4000);
86

nn++;
87

tt=setTimeout('change_img()',4000);
88

}
89

function setFocus1(i)
90

{
91

selectLayer1(i);
92

}
93

function selectLayer1(i)
94

{
95

switch(i)
96

{
97

case 1:
98

document.getElementById("focusPic1").style.display="block";
99

document.getElementById("focusPic2").style.display="none";
100

document.getElementById("focusPic3").style.display="none";
101

document.getElementById("focusPic4").style.display="none";
102

document.getElementById("focusPic5").style.display="none";
103

break;
104

case 2:
105

document.getElementById("focusPic1").style.display="none";
106

document.getElementById("focusPic2").style.display="block";
107

document.getElementById("focusPic3").style.display="none";
108

document.getElementById("focusPic4").style.display="none";
109

document.getElementById("focusPic5").style.display="none";
110

break;
111

case 3:
112

document.getElementById("focusPic1").style.display="none";
113

document.getElementById("focusPic2").style.display="none";
114

document.getElementById("focusPic3").style.display="block";
115

document.getElementById("focusPic4").style.display="none";
116

document.getElementById("focusPic5").style.display="none";
117

break;
118

case 4:
119

document.getElementById("focusPic1").style.display="none";
120

document.getElementById("focusPic2").style.display="none";
121

document.getElementById("focusPic3").style.display="none";
122

document.getElementById("focusPic4").style.display="block";
123

document.getElementById("focusPic5").style.display="none";
124

break;
125

case 5:
126

document.getElementById("focusPic1").style.display="none";
127

document.getElementById("focusPic2").style.display="none";
128

document.getElementById("focusPic3").style.display="none";
129

document.getElementById("focusPic4").style.display="none";
130

document.getElementById("focusPic5").style.display="block";
131

break;
132

}
133

}
134

</SCRIPT>
135

</html>

转载于:https://www.cnblogs.com/xpengfee/archive/2007/06/19/789725.html

网站首页图片动态更换显示【Javascript】

相关文章

关于网站子目录绑定二级域名的方法（php网站手机端）

今天打开一个网站 FSO对象实例创建失败

【原创】Crystal report 实现打印－网站开发手记

恐怖绝伦，SOPA和PIPA捅了网站窝！

stack overflow--技术问答网站

多媒体开发之分场图像和交错图像interlacing---一个破解版的迅雷云点播网站

在RHEL5下构建LAMP网站服务平台之架设Discuz!论坛

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

网站性能愈来愈差怎么办？

欢迎访问我的个人网站

大型网站的 HTTPS 实践（二）：HTTPS 对性能的影响

通过pfSense阻止对某个网站的访问

HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版

如何在最段的时间内让搜索引擎收录一个新网站？

Flickr 网站架构分析

Linux快速构建LAMP网站平台

php主页备案号底部中间,如何获取公安备案号？如何将公安备案号放到网站底部？...

配置Apache虚拟主机，实现在一台服务器上运行多个网站

如何下载一些网站本身不希望你下载的文件呢

不可忽视的力量，插件主题网站