看到如今flash用得越来越多，flash的图片切换广告用得也越来越普及，
但是对于只懂网页制作的我来说，显得有些吃力，那么有没有一种其它的方式来实现
这种效果呢？
偶然的机会看到在网上看到了一种实现方式，觉得还不错，拿下来和大家分享（全部源码需要的朋友可以留下email）：
先讲下思路：
1。利用iframe来实现网页内容的切换，如果网页内只放图片，就是flash图片切换效果。
2。div用来实现装入不同的网页内容
3。利用js的setInterval来自动切换
但是这里边有个问题，就是切换的数量是固定的只能是三个，我会在下一篇文章里做一个改进，原则上可以切换N多个
里边用到了1.htm,2.htm,3.html切换不同的内容
部分主要代码如下：
1.htm:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<title>无标题文档</title>
7![]()
>
切换页面Index.html2
3
4
5
6
7
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<link href="css/css.css" rel="stylesheet" type="text/css">
7<title>无标题文档</title>
8</head>
9<body onload=iniautoslide()>
10<div id=sudsclickstreamdiv
11style="Z-INDEX: 1; LEFT: 100px; VISIBILITY: visible; WIDTH: 80px; POSITION: absolute; TOP: -300px"></div>
12<table width=750 align="center" cellpadding=0 cellspacing=0>
13 <tbody>
14 <tr>
15 <td
16 style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: medium none"
17 width=750 bgcolor=#e6e6e6>
18 <div style="WIDTH: 0px; POSITION: relative; HEIGHT: 0px">
19 <div style="Z-INDEX: 10; LEFT: 748px; POSITION: absolute; TOP: -6px">
20 <table cellspacing=0 cellpadding=0 width=30>
21 <tbody>
22 <tr>
23 <td width=30 height=4><img height=4 alt=""
24 src="images/digi_gb_lp_008.gif" width=30></td>
25 </tr>
26 <tr>
27 <td background=images/digi_gb_lp_009.gif height=207>
28 <table cellspacing=0>
29 <tbody>
30 <tr>
31 <td style="PADDING-LEFT: 1px" width=24 height=29><img id=upbtn
32 style="CURSOR: pointer" onfocus=this.blur()
33 onClick=slideup();clearInterval(interval01); height=28 alt=UP
34 src="images/scrollad_1.gif" width=24></td>
35 </tr>
36 <tr>
37 <td height=2></td>
38 </tr>
39 <tr>
40 <td class=NUM2 id=led1 height=19>1</td>
41 </tr>
42 <tr>
43 <td height=2></td>
44 </tr>
45 <tr>
46 <td class=NUM1 id=led2 height=19>2</td>
47 </tr>
48 <tr>
49 <td height=2></td>
50 </tr>
51 <tr>
52 <td class=NUM1 id=led3 height=19>3</td>
53 </tr>
54 <tr>
55 <td height=3></td>
56 </tr>
57 <tr>
58 <td style="PADDING-LEFT: 1px" height=29><img id=downbtn
59 style="CURSOR: pointer" onfocus=this.blur()
60 onClick=slidedown();clearInterval(interval01); height=29
61 alt=DOWN src="images/scrollad_4.gif"
62 width=24></td>
63 </tr>
64 </tbody>
65 </table></td>
66 </tr>
67 <tr>
68 <td height=6><img height=6 alt=""
69 src="images/digi_gb_lp_010.gif"
70 width=30></td>
71 </tr>
72 </tbody>
73 </table>
74 </div>
75 </div>
76 <div id=main onMouseOver=clearInterval(interval01);
77 style="OVERFLOW: hidden; WIDTH: 748px; POSITION: relative; HEIGHT: 237px"
78 onMouseOut=iniautoslide(); nowrap>
79 <div id=f1
80 style="Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 0px; HEIGHT: 237px">
81 <iframe
82 name=frame1 marginwidth=0 marginheight=0 src="01.htm"
83 frameborder=0 noresize width=750 scrolling=no onload=checkdamie(1)
84 height=250></iframe>
85 </div>
86 <div id=f2
87 style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 237px; HEIGHT: 237px">
88 <iframe
89 name=frame1 marginwidth=0 marginheight=0 src="02.htm"
90 frameborder=0 noresize width=750 scrolling=no onload=checkdamie(2)
91 height=250></iframe>
92 </div>
93 <div id=f3
94 style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 474px; HEIGHT: 237px">
95 <iframe
96 name=frame1 marginwidth=0 marginheight=0 src="03.htm"
97 frameborder=0 noresize width=750 scrolling=no onload=checkdamie(3)
98 height=250></iframe>
99 </div>
100 </div>
101</table>
102<SCRIPT language=JavaScript>
103<!--
104var currentF=1;
105document.getElementById("upbtn").style.display="none";
106var mainobj = document.getElementById("main");
107var frameheight = 237;
108var scrolling=0;
109var speed = 20;
110var checkloaded=new Array();
111![]()
html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111