实现flash的图片切换效果【可以切换多个网页或者图片】

这个是得到改进后的代码，可以切换多个页面
需要完整代码的朋友可以留下email
如需再添加切换页面，只要按照下边代码部分的样式添加内容即可
切换导航td的id要顺序排
那个div的TOP为为上边一个div的Top加上div本身的高度：237

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Service.aspx.cs" Inherits="Service" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>我们的服务</title>
8

<!--
12

.tdBG
13

{
14

border: #cccccc 1px solid;
15

padding-right: 0px;
16

padding-left: 0px;
17

padding-bottom: 5px;
18

padding-top: 5px;
19

background-color:#e6e6e6;
20

}
21

-->
22

</style>
23

</head>
24

<body onload="iniautoslide()">
25

<table align="center" cellpadding="0" cellspacing="0" width="100%">
26

<tr>
27

<td style="width:180px;">
28

<img src="Images/mlogo.gif" alt="" border="0" style="width: 180px; height: 136px" />
29

</td>
30

<td>
31

<ul>
32

<li>进入市场的连锁通路</li>
33

<li>有效处理公司库存</li>
34

<li>新产品成功推广</li>
35

</ul>
36

</td>
37

</tr>
38

<tr>
39

<td colspan="2" class="tdBG" onmouseout="iniautoslide();" onmouseover="clearInterval(interval01);"
40

>
41

<div style="width: 0px; position: relative; height: 0px">
42

<div style="z-index: 10;">
43

<table cellspacing="0" cellpadding="0">
44

<tbody>
45

<tr>
46

<td height="29" style="padding-left: 1px" width="24">
47

<img id="upbtn" alt="Last" height="28" onclick="slideup();clearInterval(interval01);"
48

onfocus="this.blur()" src="images/scrollad_left.gif" style="cursor: pointer" width="24"></td>
49

<td height="2">
50

</td>
51

<td id="led1" class="NUM2" height="19">
52

1</td>
53

<td height="2">
54

</td>
55

<td id="led2" class="NUM1" height="19">
56

2</td>
57

<td height="2">
58

</td>
59

<td id="led3" class="NUM1" height="19">
60

3</td>
61

<td id="led4" class="NUM1" height="19">
62

4</td>
63

<td height="3">
64

</td>
65

<td height="29" style="padding-left: 1px">
66

<img id="downbtn" alt="Next" height="29" onclick="slidedown();clearInterval(interval01);"
67

onfocus="this.blur()" src="images/scrollad_right.gif" style="cursor: pointer" width="24"></td>
68

</tr>
69

</tbody>
70

</table>
71

</div>
72

</div>
73

<div id="main" nowrap="" style="overflow: hidden; position: relative;
74

height: 237px">
75

<div id="f1" style="z-index: 10; left: 0px; position: absolute; top: 0px;
76

height: 237px">
77

noresize="" onload="checkdamie(1)" scrolling="no" src="01.htm" width="100%"></iframe>
79

</div>
80

<div id="f2" style="display: none; z-index: 10; left: 0px; position: absolute;
81

top: 237px; height: 237px">
82

noresize="" onload="checkdamie(2)" scrolling="no" src="02.htm" width="100%"></iframe>
84

</div>
85

<div id="f3" style="display: none; z-index: 10; left: 0px; position: absolute;
86

top: 474px; height: 237px">
87

noresize="" onload="checkdamie(3)" scrolling="no" src="03.htm" width="100%"></iframe>
89

</div>
90

<div id="f4" style="display: none; z-index: 10; left: 0px; position: absolute;
91

top: 711px; height: 237px">
92

noresize="" onload="checkdamie(4)" scrolling="no" src="04.htm" width="100%"></iframe>
94

</div>
95

</div>
96

</td>
97

</tr>
98

</table>
99

100

<!--
102

var currentF=1;
103

document.getElementById("upbtn").style.display="none";
104

var mainobj = document.getElementById("main");
105

var count=(mainobj!=null)?mainobj.children.length:0;
106

//var count=4;
107

//alert(count);
108

var frameheight = 237;
109

var scrolling=0;
110

var speed = 20;
111

var checkloaded=new Array();
112

for(i=1;i<=count;i++){
113

checkloaded[i]=0;
114

}
115

function checkdamie(n){
116

checkloaded[n]=1;
117

//alert(checkloaded[n])
118

119

}
120

function alertloading(sdirection){
121

scrolling=0;
122

if(sdirection == "down"){
123

currentF--;
124

}
125

else{
126

currentF++;
127

}
128

//alert("正在下载数据,请稍等");
129

}
130

131

function scrolldown(f){
132

133

if(f>1 && f<count)
134

{ //case 2:
135

if (mainobj.scrollTop>=(frameheight*(f-1)))
136

{
137

clearInterval(inter);
138

mainobj.scrollTop=(frameheight*(f-1));
139

scrolling=0;
140

}
141

else
142

{
143

mainobj.scrollTop+=speed;
144

}
145

}
146

147

if(f==count)
148

{
149

if (mainobj.scrollTop>=frameheight*(count-1))
150

{
151

mainobj.scrollTop=frameheight*(count-1);
152

clearInterval(inter);
153

scrolling=0;
154

}
155

else{mainobj.scrollTop+=speed;}
156

}
157

}
158

159

160

function scrollup(f){
161

162

if (f<count){
163

if (mainobj.scrollTop<=(frameheight*(f-1))){
164

clearInterval(inter1);
165

mainobj.scrollTop=(frameheight*(f-1));
166

scrolling=0;
167

}
168

else{
169

mainobj.scrollTop-=speed;
170

}
171

}
172

173

if(f==count)
174

if (mainobj.scrollTop<=(frameheight(count-1))){
175

mainobj.scrollTop=(frameheight(count-1));
176

clearInterval(inter1);
177

scrolling=0;
178

}
179

else{
180

mainobj.scrollTop-=speed;
181

}
182

}
183

184

function slidedown(){
185

//slide
186

if (scrolling==0){
187

scrolling=1;
188

currentF++;
189

obj=eval("document.getElementById('f"+currentF+"')");
190

obj.style.display="block";
191

if (checkloaded[currentF]==1){
192

inter=eval("setInterval('scrolldown("+currentF+")',5)");
193

//led
194

document.getElementById("upbtn").style.display="";
195

if (currentF==(count)){
196

document.getElementById("downbtn").style.display="none";
197

}
198

for (i=1;i<=count;i++)
199

{
200

var tpobj=eval("document.getElementById('led"+i+"')");
201

if(i==currentF)
202

tpobj.className='NUM2';
203

else
204

tpobj.className=(tpobj.className=='NUM2')?'NUM1':tpobj.className;
205

}
206

}
207

else{
208

alertloading("down");
209

210

}
211

}
212

}
213

214

215

function slideup(){
216

//slide
217

if (scrolling==0)
218

{
219

scrolling=1;
220

currentF--;
221

obj=eval("document.getElementById('f"+currentF+"')");
222

obj.style.display="block";
223

if (checkloaded[currentF]==1){
224

inter1=eval("setInterval('scrollup("+currentF+")',5)");
225

//led
226

document.getElementById("downbtn").style.display="";
227

if (currentF==1){
228

document.getElementById("upbtn").style.display="none";
229

}
230

for (i=1;i<=count;i++)
231

{
232

if(i==currentF)
233

eval("document.getElementById('led"+currentF+"').className='NUM2'");
234

else
235

eval("document.getElementById('led"+i+"').className='NUM1'");
236

}
237

}
238

else{
239

alertloading("up");
240

}
241

}
242

}
243

//auto slide
244

var direction = "down";
245

var interval01;
246

var autotime = 3000;
247

function autoslide(){
248

if(direction == "down"){
249

if (currentF == (count-1)){
250

direction = "up";
251

}
252

slidedown();
253

}
254

if(direction == "up"){
255

if (currentF == 2){
256

direction = "down";
257

}
258

slideup();
259

}
260

261

}
262

function iniautoslide(){
263

interval01 = setInterval("autoslide()",autotime);
264

}
265

266

//-->
267

</script>
268

269

</body>
270

</html>
271

posted on 2008-03-02 23:27 沉默的心阅读(1722) 评论(0) 收藏举报

刷新页面返回顶部

实现flash的图片切换效果【可以切换多个网页或者图片】

公告