在學習中，發(fā)現(xiàn)多個教程中都提到了利用JQuery插件實現(xiàn)圖片滑動欄。于是在網上搜索了一番，發(fā)現(xiàn)類似的插件千千萬萬，都有各自的特色。故本教程挑選了其中的一個插件，進行講解，并在后面結合實例講解如何在PS中切片，在導出的網頁中完成圖片滑動欄欄的制作。
插件網址：http://slidesjs.com/
插件示例網址：http://slidesjs.com/examples/standard/
插件的參數(shù)：
preload (boolean)
設置為true時，顯示一個預加載圖像。在圖片比較大的情況下特別有用，能改善用戶操控。默認值是false
preloadImage (string)
預加載圖片的路徑和文件名。默認路徑是/img/loading.gif
container (string)
圖片滑動塊的容器的Class名。默認的Class名是slides_container
generateNextPrev (boolean)
是否自動生成下一個/上一個按鈕。默認值是false
next (string)
自定義下一個按鈕的Class名。默認的Class名是next
prev (string)
自定義上一個按鈕的Class名。默認的Class名是prev
pagination (boolean)
如果不使用頁碼，可以設置為false，但不是必須設置
generatePagination (boolean)
是否自動生成頁碼。默認值是true
paginationClass (string)
頁碼元素的Class名。默認的Class名是pagination
currentClass (string)
當前頁的Class名。默認的Class名是current
fadeSpeed (number)
設置（以毫秒為單位）的淡出淡入動畫的速度。默認值是350毫秒
fadeEasing (string)
設置淡出淡入動畫的寬松的效果。
必須在項目中包含Easing插件
slideSpeed (number)
設置（以毫秒為單位）的滑動動畫的速度。默認值是350毫秒
slideEasing (string)
設置滑動動畫的寬松的效果。
必須在項目中包含Easing插件
start (number)
設置滑動動畫的開始的序號。默認值是1，表示從第一張圖片開始動畫
effect (string)
設置動畫效果，給下一個/上一個按鈕和頁碼添加滑動（slide）和淡出淡入（fade）的動畫效果，如果你只使用了一個動畫效果的名字。你也可以添加兩個效果的名字。第一個將會是下一個/上一個按鈕的動畫效果，第二個會是頁碼的動畫效果。兩個效果之間用逗號分開。默認的動畫效果是slide，會使下一個/上一個按鈕和分頁的動畫效果都是滑動。
crossfade (boolean)
動畫的切換是否是交叉淡變圖像效果。默認值是false
randomize (boolean)
設置為true的時候隨機滑動圖片。默認值是false
play (number)
自動播放幻燈片，一個正數(shù)將設置為true，表示幻燈片動畫之間的時間（以毫秒為單位）。默認值是0表示false
pause (number)
當單擊上一個/下一個按鈕或者頁碼時暫停動畫。一個正數(shù)將設置為true，表示暫停的時間（以毫秒為單位）。默認值是0表示false
hoverPause (boolean)
設置為true時，鼠標在圖片上方時暫停動畫。默認值是false
autoHeight (boolean)
設置為true時自動調整高度。默認值是false
autoHeightSpeed (number)
設置自動高度動畫的時間（以毫秒為單位）。默認值是350毫秒
bigTarget (boolean)
設置為true時，點擊整個圖片時鏈接到下一張圖片。默認值是false
animationStart() (callback)
設置在動畫開始時的回調函數(shù)。默認值是空值
animationComplete() (callback)
設置在動畫完成時的回調函數(shù)。默認值是空值
示例：
接下來一步一步實現(xiàn)示例中的效果，先準備一些圖片
圖片滑動欄的背景圖片（frame.png）
左上角飄帶的圖片（new-ribbon.png）
上一個/下一個按鈕的圖片（arrow-prev.png和arrow-next.png）
頁碼圖片（pagination.png）
如下是完成基本的頁面結構
<body>
<!--圖片滑動塊區(qū)域-->
<div id="container">
<!--左上角飄帶-->
<img src="Image/new-ribbon.png" alt="New Ribbon" id="ribbon"/>
<!--滑動塊背景-->
<img src="Image/frame.png" alt="Frame" id="frame" />
<!--滑動區(qū)域-->
<div id="slides">
<!--上一個/下一個按鈕，兩個圖片超鏈接-->
<a href="#" class="prev"><img src="Image/arrow-prev.png" alt="Arrow Prev" /></a>
<a href="#" class="next"><img src="Image/arrow-next.png" alt="Arrow Next" /></a>
<!--滑動圖片，一個Div，若干圖片超鏈接-->
<div class="slides_container">
<a href="1.html"><img alt="1" src="Image/1.jpg" /></a>
<a href="2.html"><img alt="2" src="Image/2.jpg" /></a>
<a href="3.html"><img alt="3" src="Image/3.jpg" /></a>
<a href="4.html"><img alt="4" src="Image/4.jpg" /></a>
<a href="5.html"><img alt="5" src="Image/5.jpg" /></a>
</div>
</div>
</div>
</body>
上面的結構中，每一部分都有解釋，應該能看得比較清楚。標簽（div）container表示這塊內容是一個圖片滑動區(qū)塊；飄帶和背景以Img標簽存在，也可以將兩張圖片合并成一張圖片，這樣只需要一個Img標簽即可，或可增加其他的裝飾圖案；標簽（div）slides，表示圖片的滑動區(qū)域，也是本插件的作用區(qū)域，它包含三塊內容，一是上一個/下一個按鈕，以圖片鏈接形式存在；一是滑動圖片組，以若干圖片超鏈接形式存在；一是頁碼組，由插件自動生成。
上面僅僅是頁面的基本結構，還得給它們添加CSS樣式，以完成如樣張的效果
先是設置頁面的背景顏色和圖片的邊框為無（這會去除超鏈接中Img標簽的藍色邊框，藍色邊框在IE中會出現(xiàn)），以及去除超鏈接在點擊后的虛框
body { background-color:#efefef}
img { border:none;}
:focus { outline:0; }
對圖片滑動塊區(qū)域添加樣式，重點是position屬性的設置，設置為relative后，其子元素的position屬性才能起效果
#container { width:760px; height:360px; padding:10px; margin:0 auto; position:relative; z-index:0; }
對飄帶和背景設置樣式，兩個元素的position屬性都是absolute（以父容器為參照，絕對定位）
#ribbon { position:absolute; left:76px; top:10px; z-index:500; }
#frame { position:absolute; width:740px; height:340px; z-index:0; }
對滑動區(qū)域設置樣式，slides的position屬性也是absolute。絕對定位的兩個參數(shù)top和left一定要設置精確
#slides { position:absolute; top:28px; left:94px; z-index:100; }
.slides_container { width:571px; overflow:hidden; position:relative; display:none; }
對滑動的圖片設置樣式，超鏈接和圖片用相同的樣式
.slides_container a , .slides_container a img { width:571px; height:269px; display:block; }
對上一個/下一個按鈕設置樣式，先設置相同的樣式，在對下一個按鈕另外設置left樣式，使之居于右側
#slides .next,#slides .prev { position:absolute; top:107px; left:-39px; display:block; z-index:101; }
#slides .next { left:586px;}
最后對頁碼按鈕設置樣式，頁碼按鈕是由插件直接生成的，是一組超級鏈接
.pagination { margin:26px auto 0; width:100px; }
.pagination li { float:left; margin:0 1px; list-style:none; }
.pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(Image/pagination.png); float:left; overflow:hidden; }
由于頁碼按鈕中的用的圖片是兩張圖片合在一張圖片里的，故在current樣式中直接設置background-position樣式即可
.pagination li.current a {background-position:0 -12px;}
到目前為止，頁面結構和CSS樣式都已經完成了。那么該對插件的應用了
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" ></script>
<script src="Scripts/slides.min.jquery.js" type="text/javascript" ></script>
<script src="Scripts/jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#slides').slides({
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
要注意的是，在VS2010中默認引用的JQuery是1.4.1版本。該插件使用的至少是1.9.1版本。要重新下載高版本的JQuery。
下面看看效果吧
喜歡 
頂
難過
囧
圍觀
無聊
