需要完整代码的朋友可以留下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
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