午夜视频在线观看免费完整版,日本卡一卡二卡乱码三卡四码,国产高清视频免费

利用JQuery插件實(shí)現(xiàn)圖片滑動效果實(shí)例

作者：萬倉一黍點(diǎn)擊：0次評論：1次標(biāo)簽：滑動

類型：手機(jī)工具大�。�506KB語言：中文評分：2.0
標(biāo)簽：

立即下載

在學(xué)習(xí)中，發(fā)現(xiàn)多個(gè)教程中都提到了利用JQuery插件實(shí)現(xiàn)圖片滑動欄。于是在網(wǎng)上搜索了一番，發(fā)現(xiàn)類似的插件千千萬萬，都有各自的特色。故本教程挑選了其中的一個(gè)插件，進(jìn)行講解，并在后面結(jié)合實(shí)例講解如何在PS中切片，在導(dǎo)出的網(wǎ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)

圖片滑動塊的容器的Class名。默認(rèn)的Class名是slides_container

generateNextPrev (boolean)

是否自動生成下一個(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)

是否自動生成頁碼。默認(rèn)值是true

paginationClass (string)

頁碼元素的Class名。默認(rèn)的Class名是pagination

currentClass (string)

當(dāng)前頁的Class名。默認(rèn)的Class名是current

fadeSpeed (number)

設(shè)置（以毫秒為單位）的淡出淡入動畫的速度。默認(rèn)值是350毫秒

fadeEasing (string)

設(shè)置淡出淡入動畫的寬松的效果。

必須在項(xiàng)目中包含Easing插件

slideSpeed (number)

設(shè)置（以毫秒為單位）的滑動動畫的速度。默認(rèn)值是350毫秒

slideEasing (string)

設(shè)置滑動動畫的寬松的效果。

必須在項(xiàng)目中包含Easing插件

start (number)

設(shè)置滑動動畫的開始的序號。默認(rèn)值是1，表示從第一張圖片開始動畫

effect (string)

設(shè)置動畫效果，給下一個(gè)/上一個(gè)按鈕和頁碼添加滑動（slide）和淡出淡入（fade）的動畫效果，如果你只使用了一個(gè)動畫效果的名字。你也可以添加兩個(gè)效果的名字。第一個(gè)將會是下一個(gè)/上一個(gè)按鈕的動畫效果，第二個(gè)會是頁碼的動畫效果。兩個(gè)效果之間用逗號分開。默認(rèn)的動畫效果是slide，會使下一個(gè)/上一個(gè)按鈕和分頁的動畫效果都是滑動。

crossfade (boolean)

動畫的切換是否是交叉淡變圖像效果。默認(rèn)值是false

randomize (boolean)

設(shè)置為true的時(shí)候隨機(jī)滑動圖片。默認(rèn)值是false

play (number)

自動播放幻燈片，一個(gè)正數(shù)將設(shè)置為true，表示幻燈片動畫之間的時(shí)間（以毫秒為單位）。默認(rèn)值是0表示false

pause (number)

當(dāng)單擊上一個(gè)/下一個(gè)按鈕或者頁碼時(shí)暫停動畫。一個(gè)正數(shù)將設(shè)置為true，表示暫停的時(shí)間（以毫秒為單位）。默認(rèn)值是0表示false

hoverPause (boolean)

設(shè)置為true時(shí)，鼠標(biāo)在圖片上方時(shí)暫停動畫。默認(rèn)值是false

autoHeight (boolean)

設(shè)置為true時(shí)自動調(diào)整高度。默認(rèn)值是false

autoHeightSpeed (number)

設(shè)置自動高度動畫的時(shí)間（以毫秒為單位）。默認(rèn)值是350毫秒

bigTarget (boolean)

設(shè)置為true時(shí)，點(diǎn)擊整個(gè)圖片時(shí)鏈接到下一張圖片。默認(rèn)值是false

animationStart() (callback)

設(shè)置在動畫開始時(shí)的回調(diào)函數(shù)。默認(rèn)值是空值

animationComplete() (callback)

設(shè)置在動畫完成時(shí)的回調(diào)函數(shù)。默認(rèn)值是空值

示例：

接下來一步一步實(shí)現(xiàn)示例中的效果，先準(zhǔn)備一些圖片

圖片滑動欄的背景圖片（frame.png）

左上角飄帶的圖片（new-ribbon.png）

上一個(gè)/下一個(gè)按鈕的圖片（arrow-prev.png和arrow-next.png）

頁碼圖片（pagination.png）

如下是完成基本的頁面結(jié)構(gòu)

上面的結(jié)構(gòu)中，每一部分都有解釋，應(yīng)該能看得比較清楚。標(biāo)簽（div）container表示這塊內(nèi)容是一個(gè)圖片滑動區(qū)塊；飄帶和背景以Img標(biāo)簽存在，也可以將兩張圖片合并成一張圖片，這樣只需要一個(gè)Img標(biāo)簽即可，或可增加其他的裝飾圖案；標(biāo)簽（div）slides，表示圖片的滑動區(qū)域，也是本插件的作用區(qū)域，它包含三塊內(nèi)容，一是上一個(gè)/下一個(gè)按鈕，以圖片鏈接形式存在；一是滑動圖片組，以若干圖片超鏈接形式存在；一是頁碼組，由插件自動生成。

上面僅僅是頁面的基本結(jié)構(gòu)，還得給它們添加CSS樣式，以完成如樣張的效果

先是設(shè)置頁面的背景顏色和圖片的邊框?yàn)闊o（這會去除超鏈接中Img標(biāo)簽的藍(lán)色邊框，藍(lán)色邊框在IE中會出現(xiàn)），以及去除超鏈接在點(diǎn)擊后的虛框

body { background-color:#efefef}
img { border:none;}
:focus { outline:0; }

對圖片滑動塊區(qū)域添加樣式，重點(diǎn)是position屬性的設(shè)置，設(shè)置為relative后，其子元素的position屬性才能起效果

#container { width:760px; height:360px; padding:10px; margin:0 auto; position:relative; z-index:0; }

對飄帶和背景設(shè)置樣式，兩個(gè)元素的position屬性都是absolute（以父容器為參照，絕對定位）

#ribbon { position:absolute; left:76px; top:10px; z-index:500; }
#frame { position:absolute; width:740px; height:340px; z-index:0; }

對滑動區(qū)域設(shè)置樣式，slides的position屬性也是absolute。絕對定位的兩個(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; }

對滑動的圖片設(shè)置樣式，超鏈接和圖片用相同的樣式
.slides_container a , .slides_container a img { width:571px; height:269px; display:block; }

對上一個(gè)/下一個(gè)按鈕設(shè)置樣式，先設(shè)置相同的樣式，在對下一個(gè)按鈕另外設(shè)置left樣式，使之居于右側(cè)

#slides .next,#slides .prev { position:absolute; top:107px; left:-39px; display:block; z-index:101; }
#slides .next { left:586px;}

最后對頁碼按鈕設(shè)置樣式，頁碼按鈕是由插件直接生成的，是一組超級鏈接

.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)完成了。那么該對插件的應(yīng)用了

要注意的是，在VS2010中默認(rèn)引用的JQuery是1.4.1版本。該插件使用的至少是1.9.1版本。要重新下載高版本的JQuery。

下面看看效果吧