Sugo

? ? 幻燈片大家都非常熟悉了，我以雅虎幻燈片為靈感，開發(fā)了自己的幻燈片。
?? ?首先，這個幻燈片程序是在我的jsp圖片查看器上加上去的，算是滿足自己的需求吧，哈。因為有時候看幻燈片對我來說是一種享受。。。嗯
??? 首先是做一個基本的圖片自動播放的程序，這個純javascript就可以實現(xiàn)，實現(xiàn)需要的javascript方法也很簡單，代碼如下：
???? function rotateBanner(frameNumber,interval){
????? document.banner.src=fn[frameNumber].src;//為頁面中的id為banner的圖片標(biāo)記動態(tài)定義圖片的鏈接地址
????? var imageChoice=frameNumber+1;
???? ?if(imageChoice==fn.length){
???????? imageChoice=0;
????? }
????? player=window.setTimeout("rotateBanner("+imageChoice+","+inv+")",inv);
?? }
?? 其中frameNumber為圖片路徑數(shù)組的下標(biāo)，interval為顯示下一幅圖片的間隔時間。
?? 首先，我們要定義一個全局數(shù)組，數(shù)組各個元素的值為圖片的url。（一般我們都把一類的圖片放在一個目錄中，這種情況可以通過動態(tài)生成的方法來動態(tài)的為這個全局數(shù)組的各個元素賦值）
?? js方法的使用也很簡單，在這個頁面的body標(biāo)簽加入onload=“rotateBanner（0，5000）”即可，在這里0為數(shù)組的第一個元素下標(biāo)，5000為播放的間隔時間5秒。
?? 一個不能被我們控制的幻燈片頁面就產(chǎn)生了。下面我們就要開始對其進行控制了，首先，我們實現(xiàn)讓幻燈片停止?jié)L動播放圖片。這個很簡單，上面的js方法我們定義了一個定時器player變量，這個player是個全局的，當(dāng)不停的遞歸調(diào)用的時候，都是它自己在不停的被賦值。停止它我們只需把這個定時器去處即可。在頁面中加上一個超鏈接，在它的onclick事件中觸發(fā)一個js方法，不妨我們再寫一個方法，代碼為：
?? function stop(){
?????? window.clearTimeout(player);
?? }
??? 這樣就把圖片循環(huán)顯示的player定時器去除了。
??? 有停止就要有開始，開始就容易了，在開始超鏈接的onclick事件調(diào)用rotateBanner（）方法就行了，但這里有個問題，這個一會再說。
??? 我們再添加上一幅，下一幅超鏈接，我們可以通過手工點擊來顯示下一頁，這里就要又要定義一個全局變量了，它用來記錄顯示圖片的數(shù)組下標(biāo)。代碼如下：其中的firstno變量我們后面再說它的作用
?? function previous(){
??? if(imgno==0)
?????? imgno=fn.length;
?????? imgno=imgno-1;
?????? firstno=imgno;
?????? document.banner.src=fn[imgno].src;
? }
?? function next(){
??? ?if(imgno==fn.length-1)
?????? imgno=-1;
?????? imgno=imgno+1;
?????? firstno=imgno;
????? document.banner.src=fn[imgno].src;
}
? imgno就是我們定義的全局變量，來記錄當(dāng)前圖片的數(shù)組下標(biāo)。但這樣有個問題，那就是imgno的初值為多少？現(xiàn)在的代碼中并沒初始化。好，我們分析一下，從頁面打開開始，onload事件調(diào)用rotateBanner方法，這是最初的入口，下一幅上一幅按鈕也是當(dāng)執(zhí)行了這個事件后才會有作用，所以我們需要在rotateBanner方法中記錄圖片的下標(biāo)。其實也可以在聲明的時候初始化為0。
?? 所以我們在點擊開始的時候，rotateBanner（firstno，firstclock）函數(shù)里面的參數(shù)要傳入當(dāng)前圖片的下標(biāo)，不然我們點開始后幻燈片是開始幻燈顯示了，但它又從0開始了，不會從我們停止定時器時候的顯示的圖片的位置開始。在此firstno全局變量也是起到記錄的作用，但注意它和imgno變量的不同，它記錄的是目前顯示的圖片的下標(biāo)，而imgno在previous和next方法中已經(jīng)不是當(dāng)前圖片的下標(biāo)。firstclock是下面我要說明的內(nèi)容。
?? 要控制每張圖片顯示間隔的時間，通過一個下拉選擇框來操作，取得每個選項相應(yīng)的值很簡單。當(dāng)選項改動時觸發(fā)一個事件，我們?nèi)∶麨閟etclock（）方法，firstclock就是來獲得間隔時間的，代碼為：
?? function setclock(clock){
???? ?firstclock=clock;
????? rotateBanner1(imgno,clock);
?? }
?? rotateBanner1（）的代碼為：
?? function rotateBanner1(frameNumber,interval){
???? window.clearTimeout(player);
??? ?document.banner.src=fn[frameNumber].src;
???? var inv=interval;
?????var imageChoice=frameNumber+1;
???? ?if(imageChoice==fn.length){
??????? ?imageChoice=0;
???? }
???? imgno=frameNumber;
???? firstno=imgno;
???? player1=window.setTimeout("rotateBanner("+imageChoice+","+inv+")",inv);
?? }
?? 通過代碼可以看出，rotateBanner1方法其實在下拉框選項改變觸發(fā)的時候只執(zhí)行了一次，因為最后一行調(diào)用的還是原來的rotateBanner（）方法，這個代碼的當(dāng)時寫的時候很有戲劇性，嘻嘻。
?? 其實這個幻燈片還是很簡單的，大家只要動動腦，不難寫出來。。。那天看一個人物傳記，sun公司的前任首席科學(xué)家Bill Joy，一天編程能編14個小時。。。。：）。。。腦子越用越靈活，啥也不說了，向他學(xué)習(xí)，學(xué)習(xí)，再學(xué)習(xí)。
?? 哈哈，明年再接著blog了。。。。。