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

这个是得到改进后的代码，可以切换多个页面
需要完整代码的朋友可以留下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="" onload="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
posted on 2008-03-02 23:27  沉默的心  阅读(1688)  评论(0)  编辑  收藏  举报