這個是得到改進后的代碼，可以切換多個頁面
需要完整代碼的朋友可以留下email
如需再添加切換頁面，只要按照下邊代碼部分的樣式添加內容即可
切換導航td的id要順序排
那個div的TOP為為上邊一個div的Top加上div本身的高度：237

??1<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="Service.aspx.cs"?Inherits="Service"?%>
??2
??3<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
??4
??5<html?xmlns="http://www.w3.org/1999/xhtml"?>
??6<head?runat="server">
??7????<title>我們的服務</title>
??8????<link?href="Themes/default/css.css"?rel="stylesheet"?type="text/css"?/>
??9????????<meta?content="text/html;?charset=gb2312"?http-equiv="Content-Type">
?10????<style?type="text/css"?>
?11????<!--
?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????????????????<iframe?frameborder="0"?height="250"?marginheight="0"?marginwidth="0"?name="frame1"
?78????????????????????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????????????????<iframe?frameborder="0"?height="250"?marginheight="0"?marginwidth="0"?name="frame1"
?83????????????????????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????????????????<iframe?frameborder="0"?height="250"?marginheight="0"?marginwidth="0"?name="frame1"
?88????????????????????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????????????????<iframe?frameborder="0"?height="250"?marginheight="0"?marginwidth="0"?name="frame1"
?93????????????????????noresize=""?οnlοad="checkdamie(4)"?scrolling="no"?src="04.htm"?width="100%"></iframe>
?94????????????</div>
?95????????</div>
?96????????</td>
?97????????</tr>
?98????</table>
?99
100?<script?language="JavaScript">
101<!--
102var?currentF=1;
103document.getElementById("upbtn").style.display="none";
104var?mainobj?=?document.getElementById("main");
105var?count=(mainobj!=null)?mainobj.children.length:0;
106//var?count=4;
107//alert(count);
108var?frameheight?=?237;
109var?scrolling=0;
110var?speed?=?20;
111var?checkloaded=new?Array();
112for(i=1;i<=count;i++){
113checkloaded[i]=0;
114}
115function?checkdamie(n){
116????checkloaded[n]=1;
117????//alert(checkloaded[n])
118
119}
120function?alertloading(sdirection){
121scrolling=0;
122if(sdirection?==?"down"){
123currentF--;
124}
125else{
126currentF++;
127}
128//alert("正在下載數據,請稍等");
129}
130
131function?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
160function?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
184function?slidedown(){
185????//slide
186if?(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
215function?slideup(){
216????//slide
217if?(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
244var?direction?=?"down";
245var?interval01;
246var?autotime?=?3000;
247function?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}
262function?iniautoslide(){
263interval01?=?setInterval("autoslide()",autotime);
264}
265
266//-->
267?</script>
268
269</body>
270</html>
271

轉載于:https://www.cnblogs.com/neilvension/archive/2008/03/02/1088164.html

總結

以上是生活随笔為你收集整理的实现flash的图片切换效果【可以切换多个网页或者图片】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。