Jquery相冊插件（開源下載） - xcj26－IT工程師數位筆記本

文章出處

一，導言

　　上次 “不定義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上方法一不可行，方法二可行，我還沒有分析具體原因，接下來我會作進一步的原因分析。

五：成果

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