jQuery相冊插件（開源下載）

一，導言

　　上次 「不定義JQuery插件，不要說會JQuery」 的博客寫的膚淺，漏洞百出，並且最重要的是從理論上說如何定義一個jQuery插件，沒有實質性的寫一個jQuery插件出來，這未免是紙上談兵。在兩週前我就琢磨着寫一個什麼插件，最後決定寫一個jQuery相冊插件比較合適，jQuery相冊插件雖然在google上一搜，能搜索出成百上千的產品，好比下邊列表中談到的：

　　 60+ Useful jQuery Image Slider Roundup

　　100+ Free jQuery Image Slider Gallery Plugins - Free Download 

　　60+Javascript圖片相冊腳本

     這些插件我基本上都看過，有些不兼容ie6，有些體積過大，有些要收費，想找出一個能知足本身的，在琳琅滿目的插件中不花上一兩天功夫的篩選，最後說不定還帶上遺憾選擇一個不太符合本身的插件。今天我寫jQuery插件，毫不是閉門造車，而是爲了掃平兼容性強（ie6+,firefox,chrome），插件自身體積小，免費開源的道路。固然最重要的是爲了讓你們瞭解如何寫出一個jQuery插件。授人以魚不如授人以漁。

二，準備工做

　　知已知彼，百戰不敗，我閱讀了幾款jQuery相冊插件的代碼，以easySlider爲例，其中有些思想很是值得借鑑，而且jQuery用的很是嫺熟，可是整個插件也有缺陷，好比vertical：true 時，不支持垂直滾動；若是連續點擊prev按鈕時，圖片出現間斷滾動；不能同時支持‘上一張，下一張’和數字導航；此款插件屬性多，讓新手的上手難度大。針對這些缺陷，我感受有必要再寫一款jQuery相冊插件與你們分享。

三，目標

　　1：此款插件應該兼容絕大多數瀏覽器（包括ie6，twitter的bootstrap都不支持ie6了，可是淘寶，騰訊，網易都尚未放棄ie6，你想進這些公司，因此仍是應該考慮ie6）

　　2：不影響使用此插件的網頁的其它佈局，以及與此頁面其它jQuery版本以及js的兼容（在目前市面上的好多插件都作不到這一點）。

　　3：此插件體積小，壓縮後的js只有5.6kb。

　　4：支持圖片垂直滾動，橫向滾動。

　　5：支持圖片‘上一張，下一張’導航，數字導航。

　　6：支持圖片循環連續滾動。

　　7：能夠經過屬性設置每張圖片切換的間隔時間。

　　8：能夠設置圖片的滾動速度。

　　9：一個頁面能夠放置多個jQuery相冊插件，而且互不影響。

　　10：每一個相冊插件能夠靈活的設置大小，邊框等。

固然這些都不是最重要的，最重要的是個人信念，個人目標是支持開源，不斷更新，精益求精，打出國際市場。園子裏有朋友願意給我提供一個服務器空間的，我立刻作一個英文網站，把這個插件給掛起來。這個開源插件的名稱叫miniSlider。

四：動手實踐

 　　雖然這個插件只有12行css代碼，200多行js代碼，可是每行都通過我仔細的推敲。下邊以幾個典型案例來講明：

　　1，支持圖片循環連續滾動：這是我開發插件趕上的第一個問題。假如一個相冊有4張圖片須要循環連續播放，我最開始的作法是，找出須要當前顯示的那個圖片，把圖片移動到第一位，這樣就形成了圖片之間的順序混亂，後來我用下邊這種方法來解決圖片循環連續滾動的問題：

 把最後一個圖片添加到第一個圖片以前，第一個圖片添加到最後一個圖片以後。這樣不論是向前滾動，仍是向後滾動，都能支持循環連續滾動。

垂直的狀況也如此：

 你們一看圖，應該明白支持圖片循環連續滾動的端倪了。顯而易見，圖片的垂直滾動或者說是橫向滾動，都沒有那麼神祕。

2：ie6下的css問題：

a：IE6下浮動後的元素使用負margin被隱藏問題，能夠用 _position:relative;屬性解決，這兒用了css hack原理。_只支持ie6, *支持ie6,ie7。這些css的hack 我相信一個web開發者都是無比的熟悉。

b：DIV中LI超出寬度不換行解決方法  div(white-space:nowrap;) li(*display:inline;  *float:none; *zoom:1;)  一旦IE 下觸發了 hasLayout，設置 block 元素爲 inline 會使 display:inline 效果與 display:inline-block 類似 。

c：ie6下的png圖片不透明。作圖片相冊，「上一張，下一張」按鈕，圓點導航按鈕都是必不可少的，這些按鈕都在懸浮在相冊圖片之上，爲了使其按鈕圖片不要遮擋相冊圖片，因此這些按鈕圖片的背景必需要透明，在其它瀏覽器上都能很好的實現按鈕圖片背景透明，可是在ie6瀏覽器顯示的時候就是一件很不愉快的事，必需要藉助於其它方法解決ie6下png圖片不透明的問題。IE6 PNG透明終極解決方案（打造W3Cfuns-IE6PNG最強帖） 這篇帖子說出了目前可以解決ie6下背景圖片不透明的問題，若是僅僅是一個很初級的應用，隨便用那種方案都是沒問題的，當你有一點點個性化的需求，那就應該仔細考慮要用那種方案了。我在這兒選用的是：DD_belatedPNG_0.0.8a-min.js 這種方案。這種方案我感受是比較完美的，可是完美中也有缺陷，聽我詳細道來，我有一個圖片圓點的導航功能，就是把當前圖片對應在的圓點按鈕變爲高亮。css代碼與js代碼對應以下：

.mini-slider .n-ul li a{ margin:0px; padding:0px; display:block;  float:left;  height:20px; width:20px;  background-image:url(images/mini-circlebutton.png);}
.mini-slider .n-ul li .current-a{background-position: 0px 18px;}

 

//方法1：
$(liObj).find("a").addClass("current-a");
//方法2：
$(liObj).find("a").css({ "background-position": "0px 18px" });

方法一和方法2，在firefox,chrome,ie7+的瀏覽器都能產生一樣的效果，可是在ie6上就折騰了我大半天。當你在這個導航按鈕上運用了 DD_belatedPNG.fix("div,a, background") 這行代碼後（在ie6上支持png圖片透明），在ie6上方法一不可行，方法二可行，我尚未分析具體緣由，接下來我會做進一步的緣由分析。

五：成果

　　作了那麼多的準備工做，對於一個熱愛寫程序的人，這個時候的心情實際上是激動的。請看下圖，這個效果是否是很好看。

有時候圖片雖然能足夠的說明真相，可是對於程序來講好像還差一步，可運行的代碼才能說明真相。先推薦再下載