实现图片切换效果【不仅仅是图片哦，网页也可以的】

看到如今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 < style  type ="text/css" >
 8<!--
 9body {}{
10    background-color: #66CCFF;
11}
12-->
13 </ style ></ head >
14
15 < body >
16 第一个内容页面
17 </ body >
18 </ html >

切换页面Index.html

 

  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 
 11 style = " 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 <!--
104 var  currentF = 1 ;
105 document.getElementById( " upbtn " ).style.display = " none " ;
106 var  mainobj  =  document.getElementById( " main " );
107 var  frameheight  =   237 ;
108 var  scrolling = 0 ;
109 var  speed  =   20 ;
110 var  checkloaded = new  Array();
111 for (i = 1 ;i <= 3 ;i ++ ) {
112checkloaded[i]=0;
113}
114 function  checkdamie(n) {
115    checkloaded[n]=1;
116    //alert(checkloaded[n])
117
118}
119 function  alertloading(sdirection) {
120scrolling=0;
121if(sdirection == "down"){
122currentF--;
123}
124else{
125currentF++;
126}
127//alert("正在下载数据,请稍等");
128}
129
130 function  scrolldown(f) {
131
132    switch (f){
133    case 2:
134    if (mainobj.scrollTop>=frameheight){
135        clearInterval(inter);
136        mainobj.scrollTop=frameheight;
137        scrolling=0;
138        }
139    else{mainobj.scrollTop+=speed;}
140    break;
141    case 3:
142    if (mainobj.scrollTop>=frameheight*2){
143        mainobj.scrollTop=frameheight*2;
144        clearInterval(inter);
145        scrolling=0;
146        }
147    else{mainobj.scrollTop+=speed;}
148    break;
149    }
150}
151
152
153 function  scrollup(f) {
154
155    switch (f){
156    case 1:
157    if (mainobj.scrollTop<=0){
158        clearInterval(inter1);
159        mainobj.scrollTop=0;
160        scrolling=0;
161        }
162    else{
163    mainobj.scrollTop-=speed;
164    }
165    break; 
166    case 2:
167    if (mainobj.scrollTop<=frameheight){
168        mainobj.scrollTop=frameheight;
169        clearInterval(inter1);
170        scrolling=0;
171        }
172    else{
173    mainobj.scrollTop-=speed;
174    }
175    break; 
176    }
177
178}
179
180 function  slidedown() {
181    //slide
182if (scrolling==0){
183    scrolling=1;
184    currentF++;
185    obj=eval("document.getElementById('f"+currentF+"')");
186    obj.style.display="block";
187    if (checkloaded[currentF]==1){
188        inter=eval("setInterval('scrolldown("+currentF+")',5)");
189        //led
190        document.getElementById("upbtn").style.display="";
191        if (currentF==3){
192        document.getElementById("downbtn").style.display="none";
193        }
194        for (i=1;i<=3;i++){
195        eval("document.getElementById('led"+i+"').className='NUM1'");
196        }
197        eval("document.getElementById('led"+currentF+"').className='NUM2'");
198    }
199    else{
200    //alert(checkloaded[currentF]);
201    alertloading("down");
202    
203    }
204    }
205}
206
207
208 function  slideup() {
209    //slide
210if (scrolling==0){
211    scrolling=1;
212    currentF--;
213    obj=eval("document.getElementById('f"+currentF+"')");
214    obj.style.display="block";
215        if (checkloaded[currentF]==1){
216        inter1=eval("setInterval('scrollup("+currentF+")',5)");
217        //led
218        document.getElementById("downbtn").style.display="";
219        if (currentF==1){
220        document.getElementById("upbtn").style.display="none";
221        }
222        for (i=1;i<=3;i++){
223        eval("document.getElementById('led"+i+"').className='NUM1'");
224        }
225        eval("document.getElementById('led"+currentF+"').className='NUM2'");
226        }
227        else{
228        alertloading("up");
229        }
230    }
231}
232 // auto slide
233 var  direction  =   " down " ;
234 var  interval01;
235 var  autotime  =   3000 ;
236 function  autoslide() {
237    if(direction == "down"){
238        if (currentF == 2){
239         direction = "up";
240        }
241    slidedown();
242    //alert(direction);
243    }
244    if(direction == "up"){
245        if (currentF == 2){
246         direction = "down";
247        }
248    slideup();
249    //alert(direction);
250    }
251    
252}
253 function  iniautoslide() {
254interval01 = setInterval("autoslide()",autotime);
255}
256
257 // -->
258 < / SCRIPT>
259 < / body>
260 < / html>

转载于:https://www.cnblogs.com/neilvension/archive/2008/03/02/1088154.html