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

看到如今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 
 11style="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<!--
104var currentF=1;
105document.getElementById("upbtn").style.display="none";
106var mainobj = document.getElementById("main");
107var frameheight = 237;
108var scrolling=0;
109var speed = 20;
110var checkloaded=new Array();
111for(i=1;i<=3;i++){
112checkloaded[i]=0;
113}
114function checkdamie(n){
115    checkloaded[n]=1;
116    //alert(checkloaded[n])
117
118}
119function alertloading(sdirection){
120scrolling=0;
121if(sdirection == "down"){
122currentF--;
123}
124else{
125currentF++;
126}
127//alert("正在下载数据,请稍等");
128}
129
130function 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
153function 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
180function 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
208function 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
233var direction = "down";
234var interval01;
235var autotime = 3000;
236function 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}
253function iniautoslide(){
254interval01 = setInterval("autoslide()",autotime);
255}
256
257//-->
258</SCRIPT>
259</body>
260</html>
posted on 2008-03-02 23:06  沉默的心  阅读(1109)  评论(0)  编辑  收藏  举报