當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS--切换图片总结
生活随笔
收集整理的這篇文章主要介紹了
JS--切换图片总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天正好有時間，總結一下通過javascript來實現切換圖片，可以通過以下幾種方法實現： 方法一：實現簡單的圖片切換 可以自己配置,自己設置每張圖片切換的時間間隔,自己設置每張圖片的路徑(絕對,相對路徑都可以) - <html> <head> <title>例子1：實現簡單的圖片切換</title> <script language=javascript> var curIndex=0; //時間間隔 單位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; setInterval(changeImg,timeInterval); function changeImg() { var obj=document.getElementById("obj"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src=arr[curIndex]; } </script> </head> <body> <img id=obj src ="1.jpg" border =0 /> </body> </html> - 方法二：實現幻燈片切換圖片 包含的二個JS文件中，包括關于adRotator所有函數的實現。 js文件下載地址：http://files.cnblogs.com/lily4064/CreateDiv-aaaaaa.js.rar - <html> <head> <script language="javascript" src="CreateDiv.js4"></script> <script language="javascript" src="aaaaaa.js4"></script> </head> <body> <form id=form1> <table cellspacing=0 cellspadding=0 bodor=0 width=100%> <tr> <td> <div id="AdRotator" class="AdRotator" style="margin-bottom:0px;"></div> </td> </tr> </table> <INPUT id="hdImg1" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406304.jpg"/> <INPUT id="hdImg2" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406305.jpg"/> <INPUT id="hdImg3" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406303.jpg"/> <INPUT id="hdImg4" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406302.jpg"/> <INPUT id="hdImg5" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406301.jpg"/> <SCRIPT language="JavaScript"> <!-- var hdImg = new Array(); for( var i = 0 ; i < 5 ; i++) { eval("hdImg[" + i + "] = document.forms[0].elements.hdImg" + (i+1) + ".value"); }; adRotator.initialize("AdRotator"); for( var i=0 ; i < hdImg.length ; i ++) { adRotator.add(hdImg[i]); } adRotator.play(); //--> </SCRIPT> </form> </body> </html> - 方法三：js和flash結合的圖片切換，例如現在好多網站上面的新聞切換，并可鏈接地址。 需要下載一個FLASH：http://files.cnblogs.com/lily4064/focus.rar - <html> <head> <title>js和flash切換圖片</title> </head> <body> <a target="_self" href="javascript:goUrl()"><span class="f14b"> <script type="text/javascript"> imgUrl1="http://proimg.163.com/channel6/ebay/mail_145x90.jpg"; imgtext1="網頁教學網制作素材" imgLink1=escape("http://cimg2.163.com/cnews/2007/11/20/200711200904102880e.jpg"); imgUrl2="http://www.webjx.com/img/200406302.jpg"; imgtext2="網頁教學網網頁制作專區" imgLink2=escape("http://www.webjx.com/htmldata/sort/3.html"); imgUrl3="http://www.webjx.com/img/200406303.jpg"; imgtext3="網頁教學網網頁特效專區" imgLink3=escape("http://www.webjx.com/htmldata/sort/5.html"); imgUrl4="http://www.webjx.com/img/200406304.jpg"; imgtext4="網頁教學網視頻教程" imgLink4=escape("http://www.webjx.com/htmldata/sort/15.html"); imgUrl5="http://www.webjx.com/img/200406305.jpg"; imgtext5="網頁教學網網頁制作書籍" imgLink5=escape("http://www.webjx.com/htmldata/sort/7.html"); var focus_width=280 var focus_height=200 var text_height=18 var swf_height = focus_height+text_height - var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5 var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5 var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5 - document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">'); - document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">'); - document.write('<param name="menu" value="false"><param name=wmode value="opaque">'); - document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'); - document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');?? document.write('</object>'); - </script> </span></a><span id="focustext" class="f14b"></span> </body> </html> - - 本文參考： http://www.webjx.com/htmldata/2005-10-01/1128143647.html http://www.mflady.com/space/index.php/126067/viewspace-21760 http://thcjp.cnblogs.com/archive/2006/07/25/434310.html??（該BLOG里總結了大量的JS代碼，可以參考學習）
轉載于:https://www.cnblogs.com/lily4064/archive/2007/11/20/965741.html
總結
以上是生活随笔為你收集整理的JS--切换图片总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转发]项目修复－把有麻烦的项目带向成功
- 下一篇： DataTable 的 JSON 序列化