Sugo

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