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