Sugo

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