使用JavaScript制作圖片幻燈片詳細

1、本章任務本章任務 演示示例演示示例1 1：圖片幻燈片圖片幻燈片 演示示例演示示例2 2：加了效果的圖片幻燈片加了效果的圖片幻燈片 演示示例演示示例3 3：加上標注的圖片幻燈片加上標注的圖片幻燈片n制作制作產品展示平臺產品展示平臺n 制作制作加了效果的圖片幻燈片n 制作制作加上標注的圖片幻燈片制作制作圖片幻燈片圖片幻燈片-1如何在頁面上方顯示圖片？如何控制圖片的如何在頁面上方顯示圖片？如何控制圖片的轉換轉換？使用使用DIV層，把圖片放在層中，然后使用層，把圖片放在層中，然后使用JavaScript控制控制圖片的圖片的src制作制作圖片幻燈片圖片幻燈片-2n實現(xiàn)思路：實現(xiàn)思路：在頁面中插入層，然后

2、在層中插入圖片在頁面中插入層，然后在層中插入圖片編寫腳本編寫腳本1、使用getElementById( “圖片的Id”)方法獲取圖片對象2、使用數(shù)組保存圖片名稱。用循環(huán)改變數(shù)組的下表。從而改變圖片的src制作制作圖片幻燈片圖片幻燈片-3i=0i=0function function change() document.getElementById(tp2).src=img/+i+.jpg;i+;i+;循環(huán)顯示圖片循環(huán)顯示圖片if(i=5)if(i=5) i=0i=0 setInterval(setInterval(change(),1000),1000)圖片的名稱為;0.jpg到4.jpg當顯

3、示的圖片是最后當顯示的圖片是最后一張圖片了，再重新一張圖片了，再重新還是循環(huán)還是循環(huán)每隔每隔1秒執(zhí)行一次函秒執(zhí)行一次函數(shù)，換一張圖片數(shù)，換一張圖片圖片的名稱要有規(guī)圖片的名稱要有規(guī)律律制作制作圖片幻燈片圖片幻燈片-4上一張上一張PPT中示例能實現(xiàn)中示例能實現(xiàn)圖片互換圖片互換，但，但要求要求圖片圖片的名稱必的名稱必須有規(guī)律而且最后是數(shù)字，如果圖片的名稱是沒有規(guī)律的須有規(guī)律而且最后是數(shù)字，如果圖片的名稱是沒有規(guī)律的或不是數(shù)字的或不是數(shù)字的，怎么辦？，怎么辦？將圖片的名稱放到一個數(shù)組里面。循環(huán)數(shù)組的下標。將圖片的名稱放到一個數(shù)組里面。循環(huán)數(shù)組的下標。制作制作圖片幻燈片圖片幻燈片-3function c

4、hange()function change() var srcarray=new var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpArray(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);g,m.jpg);document.getElementById(tp2).src=srcarrayi;.src=srcarrayi;i+;i+;if(i=srcarray.length) i=0;i=0; setInterval(change(),1000);setInterval

5、(change(),1000);好處：圖片的名稱可以使隨意的，不用是數(shù)字當顯示的圖片是最后當顯示的圖片是最后一張圖片了，再重新一張圖片了，再重新還是循環(huán)還是循環(huán)每隔每隔1秒執(zhí)行一次函秒執(zhí)行一次函數(shù)，換一張圖片數(shù)，換一張圖片圖片的名稱保存在圖片的名稱保存在數(shù)組內數(shù)組內制作制作圖片幻燈片圖片幻燈片-4上一張上一張PPT中示例能實現(xiàn)中示例能實現(xiàn)圖片互換圖片互換，但，但圖片是按照在數(shù)組圖片是按照在數(shù)組中定義的順序顯示的中定義的順序顯示的，如果我想隨機的顯示，不分順序。如果我想隨機的顯示，不分順序。怎么辦？怎么辦？用隨機數(shù)表示，隨機數(shù)的范圍是用隨機數(shù)表示，隨機數(shù)的范圍是0 0到數(shù)組的大小到數(shù)組的大小制作

6、制作圖片幻燈片圖片幻燈片-3var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);function function change() 為為0 0到到4 4的任意一個整數(shù)的任意一個整數(shù)i=Math.floor(Math.random()*srcarray.length)document.getElementById(tp2).src=img/+srcarrayi; setInterval(setInterval(change(),1000),1000)隨機數(shù)隨機數(shù)的的范圍是數(shù)組范圍是數(shù)組的大小的大小圖片的圖

7、片的src為下標是為下標是隨機數(shù)的數(shù)組的值隨機數(shù)的數(shù)組的值制作制作圖片幻燈片圖片幻燈片-4直接在直接在JavaScript中寫中寫setInterval()代碼，可以實現(xiàn)圖片代碼，可以實現(xiàn)圖片的互換，但如何實現(xiàn)將鼠標放上去時就停止呢的互換，但如何實現(xiàn)將鼠標放上去時就停止呢使用使用OnmouseOver()OnmouseOver()事件，調用停止循環(huán)的函數(shù)事件，調用停止循環(huán)的函數(shù)clearInterval(timeid);制作制作圖片幻燈片圖片幻燈片-3function restop()function restop() clearInterval(timeid); img id=img1 sr

8、c=img/1.jpg 當鼠標放上去的時候當鼠標放上去的時候停止停止停止循環(huán)的函數(shù)停止循環(huán)的函數(shù)制作制作圖片幻燈片圖片幻燈片-4上張上張PPT實現(xiàn)了將鼠標放上去時就停止，但發(fā)現(xiàn)鼠標離開實現(xiàn)了將鼠標放上去時就停止，但發(fā)現(xiàn)鼠標離開時還是停止的，如何實現(xiàn)鼠標離開時，再開始循環(huán)？時還是停止的，如何實現(xiàn)鼠標離開時，再開始循環(huán)？使用使用OnmouseOut()OnmouseOut()事件，調用開始循環(huán)的函數(shù)事件，調用開始循環(huán)的函數(shù)timeid=setInterval(start(),1000);制作制作圖片幻燈片圖片幻燈片-3function restart()function restart() tim

9、eid=setInterval(start(),1000); function restop()function restop() clearInterval(timeid); 重新開始循環(huán)的函重新開始循環(huán)的函數(shù)數(shù)停止循環(huán)的函數(shù)停止循環(huán)的函數(shù)鼠標放上去停止，鼠標離開鼠標放上去停止，鼠標離開時開始時開始常見錯誤常見錯誤-1nfunction restart()nntimeid=setInterval(start(),1000);nnfunction restop()nnclearInterval(timeid);n剛開始有學生定義剛開始有學生定義start()函數(shù)，然后調用，會出現(xiàn)函數(shù)，然后調用

10、，會出現(xiàn)錯誤，原因錯誤，原因start為為JavaScript的保留字的保留字制作制作圖片幻燈片圖片幻燈片-4以上將要實現(xiàn)的效果基本上完整了，但如何實現(xiàn)網(wǎng)站中換以上將要實現(xiàn)的效果基本上完整了，但如何實現(xiàn)網(wǎng)站中換圖片時有效果呢？不是單純的把圖片換了圖片時有效果呢？不是單純的把圖片換了用用CSSCSS中的濾鏡來實現(xiàn)中的濾鏡來實現(xiàn)制作制作圖片幻燈片圖片幻燈片-3imgimgfilter:RevealTrans(Duration=3,filter:RevealTrans(Duration=3,Transition=21););border:none;border:none; 定義圖片的濾鏡，定義圖片的

11、濾鏡，制作制作圖片幻燈片圖片幻燈片-3var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);function change()tp2.filters0.apply();i=Math.floor(Math.random()*srcarray.length)tp2.src=img/+srcarrayi;tp2.filters0.play();setInterval(change(),1000)圖片開始加載濾鏡圖片開始加載濾鏡播放濾鏡播放濾鏡制作制作圖片幻燈片圖片幻燈片-4上面的示例實現(xiàn)了圖片互換時只能有一種效果

12、，如果我想上面的示例實現(xiàn)了圖片互換時只能有一種效果，如果我想要多種效果怎么辦？要多種效果怎么辦？則則效果是由濾鏡的效果是由濾鏡的Transition的值控制的，所以用JavaScript控制濾鏡的濾鏡的Transition的值制作制作圖片幻燈片圖片幻燈片-3var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);function change()tp2.filters0.apply();i=Math.floor(Math.random()*srcarray.length)tp2.src=img/+srcarr

13、ayi;tp2.filters0. Transition=itp2.filters0.play();setInterval(change(),1000)改變改變Transition的值，就是改變效果制作制作圖片幻燈片圖片幻燈片-4整個的代碼在火狐整個的代碼在火狐瀏覽器內瀏覽器內沒有任何效果沒有任何效果，如果用戶用的，如果用戶用的是火狐瀏覽器怎么辦？是火狐瀏覽器怎么辦？Css濾鏡是微軟的東西，只有濾鏡是微軟的東西，只有IE瀏覽器支持，但火狐不支瀏覽器支持，但火狐不支持但在火狐內可以實現(xiàn)圖片互換的效果持但在火狐內可以實現(xiàn)圖片互換的效果，再火狐中不使用，再火狐中不使用濾鏡判斷游覽器類型執(zhí)行不同的代碼

14、濾鏡判斷游覽器類型執(zhí)行不同的代碼制作制作圖片幻燈片圖片幻燈片-3if(navigator.userAgent.indexOf(MSIE)!=-1)function aa()tp2.filters0.apply();i=Math.floor(Math.random()*5)tp2.src=img/+i+.jpg;tp2.filters0.Transition=itp2.filters0.play();else if(navigator.userAgent.indexOf(Firefox)!=-1)function aa()i=Math.floor(Math.random()*5)tp2.src=

15、img/+i+.jpg;如果瀏覽器為火狐如果瀏覽器為火狐如果瀏覽器為如果瀏覽器為IE?n擴展擴展:n如何將一個圖片的幻燈片特效放到自己的網(wǎng)站上如何將一個圖片的幻燈片特效放到自己的網(wǎng)站上n示例原效果示例原效果:n加上后的效果加上后的效果:上機作業(yè)上機作業(yè)n再你的網(wǎng)站中需要多個圖片輪流顯示的。都加上再你的網(wǎng)站中需要多個圖片輪流顯示的。都加上n比如原來只是一張圖片需要幾張輪流顯示，原來比如原來只是一張圖片需要幾張輪流顯示，原來沒有實現(xiàn)沒有實現(xiàn)n比如，原來用比如，原來用flash實現(xiàn)的圖片互換的效果，但實現(xiàn)的圖片互換的效果，但flash太大。需要將其改成太大。需要將其改成javascript代碼代碼擴

16、展：擴展：n給圖片加上序號給圖片加上序號制作制作圖片幻燈片圖片幻燈片-4標簽用什么技術實現(xiàn)？標簽用什么技術實現(xiàn)？用層，或是無序列表用層，或是無序列表制作制作圖片幻燈片圖片幻燈片-3 1 2 3 4 5 6使用無序列表使用無序列表制作制作圖片幻燈片圖片幻燈片-4標簽如何跟圖片對應起來標簽如何跟圖片對應起來當顯示第一張圖片時，將第一個列表的背景色變色當顯示第一張圖片時，將第一個列表的背景色變色document.getElementById(lid).style.background=red制作制作圖片幻燈片圖片幻燈片-3function change()img1.filters0.apply();

17、img1.filters(0).Transition=iimg1.src=images/+srcarrayi;img1.filters0.play();lid=banners_+idocument.getElementById(lid).style.background=redi=i+1if(i6)i=1將對應的將對應的li的背景色，的背景色，設置紅色設置紅色設置設置li的的id，id跟數(shù)組的跟數(shù)組的下標對應，數(shù)組的下標跟下標對應，數(shù)組的下標跟圖片對應圖片對應，制作制作圖片幻燈片圖片幻燈片-4從上面的代碼演示結果，前面的從上面的代碼演示結果，前面的li的背景色變成紅色后，就的背景色變成紅色后，

18、就不變回來了，最后所有的列表都變?yōu)榧t色。不符合要求怎不變回來了，最后所有的列表都變?yōu)榧t色。不符合要求怎么辦？么辦？在一個列表的背景色變成紅色時，其余的都應變回原來的顏色。制作制作圖片幻燈片圖片幻燈片-3change()函數(shù)中將函數(shù)中將document.getElementById(lid).style.background=redlid=banners_+i改為改為for(m=1;m=6;m+)lid=banners_+mif(m=i)document.getElementById(lid).style.background=redelsedocument.getElementById(lid

19、).style.background=#FF66FF其余的還為原來的顏色其余的還為原來的顏色將當前的將當前的li的背景色設置成紅的背景色設置成紅色（注意色（注意m和和 i的值是對應的）的值是對應的）制作制作圖片幻燈片圖片幻燈片-4如何實現(xiàn)鼠標點擊哪個標簽，就顯示相對應的圖片如何實現(xiàn)鼠標點擊哪個標簽，就顯示相對應的圖片在每個在每個li的的Onmouseover事件調用函數(shù)，改變圖片的事件調用函數(shù)，改變圖片的src制作制作圖片幻燈片圖片幻燈片-3function duiying(x)clearInterval(timeid)img1.src=images/+srcarrayx;for(m=1;m=6;m+)lid=banners_+mif(m=x)document.getElementById(lid).style.background=redelsedocument.getElementById(lid).style.background=#FF66FF同樣需