|
查看幻燈片效果
顯然，效果很實(shí)用。對(duì)于這個(gè)效果，我們并不解釋如何去使用效果庫，而是講解如何創(chuàng)建類似的效果，并保持他的可用性，分離式（unobtrusive），可維護(hù)性（讓未來的維護(hù)者，在不需要修改你的腳本的情況下，修改圖片，外觀或文本標(biāo)簽）。
無 JavaScript 狀態(tài)下，用戶將看到下面的效果：
添加和移除圖片、改變圖片的順序以及添加標(biāo)題，這些在 HTML 中都很容易做到。并且最后的解決并不意味著維護(hù)者需要懂任何 JavaScript 或者在源碼中搜索在哪里修改 CSS 的 class, id 或者文本標(biāo)簽。
你有沒有準(zhǔn)備好花費(fèi)一些時(shí)間去一步一步的嘗試創(chuàng)建這個(gè)效果？
第一步：分析問題（Analizing the problem）
創(chuàng)建一個(gè)好的腳本，第一步應(yīng)該是去分析哪些是你要完成的：我們想要?jiǎng)?chuàng)建一個(gè)照片的幻燈片效果，并且我們想要保持維護(hù)的方便。
如何創(chuàng)建一個(gè)幻燈片效果
在一個(gè)網(wǎng)站上擁有幻燈片有幾種方法：
- 在文檔中包含所有的圖片。
當(dāng)他運(yùn)行在無 JavaScript 狀態(tài)，這是一個(gè)安全的選擇。而且，當(dāng)頁面被載完，所有的圖片也會(huì)將被載完。然而，這個(gè)方式只適用于少量的圖片。
- 在文檔中包含第一張圖片，并且有一個(gè)創(chuàng)建幻燈片功能的服務(wù)器端腳本。
這也是相當(dāng)安全的，但是對(duì)于終端用戶來說，這是非常令人厭煩的——因?yàn)槲也幌爰虞d整個(gè)頁面，僅想得到下一張照片。但對(duì)頁面展示和廣告點(diǎn)擊比較有效，這也是為什么大量的新聞?wù)军c(diǎn)使用這個(gè)方法。
- 在文檔中包含第一張圖片，并按需加載其他圖片。
這個(gè)方法令你厭煩的是，必須依賴于 JavaScript ，并且要有一個(gè)維護(hù)照片列表的 JavaScript 數(shù)組。你還需提供一個(gè)加載指示器，用來顯示用戶一些正在發(fā)生的事情。
在我們的案例中，我們采取下面的圖片列表，用向前和向后的按鈕把他變成一個(gè)幻燈片效果，并且一個(gè)指示器告訴我們，照片總數(shù)中的哪張照片是當(dāng)前顯示的。
<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
最后的輸出會(huì)看起來像例子中的幻燈片效果。
依賴關(guān)系檢查
我們這里有一些元素依賴于 JavaScript 生成：文字指示器和向前和向下的鏈接。為了保持我們解決方法的可用性，我們需要確保一些事情：
- 僅當(dāng) JavaScript 可用（用戶信賴我們提供給他們使用的功能）時(shí)，這些元素應(yīng)該出現(xiàn)。一個(gè)鏈接，不能做任何違反用戶對(duì)我們的信任的事情。
- 不論輸入設(shè)備（讓我們不要依賴用戶是否有鼠標(biāo)），交互式元素都應(yīng)該可用。
- 圖片不應(yīng)該被隱藏，除非使用者能再次訪問他們。在技術(shù)上，僅顯示第一張圖片，且沒有向前和向后的鏈接是預(yù)留退路的做法，但是為什么要用戶已下載所有的圖片僅只看到第一張？
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 JavaScript創(chuàng)建可維護(hù)幻燈片效果 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 JavaScript創(chuàng)建可維護(hù)幻燈片效果 [1]
第 2 頁 
