大(dà)概在一個(gè)多(duō)月前，我寫了一篇文章，大(dà)概介紹了jFlow內(nèi)容滑動插件的應用，有(yǒu)朋友(yǒu)問我要求提供更多(duō)的樣式參考。

關于jFlow基本應用，大(dà)家(jiā)可(kě)以參考前面我寫的文章：jFlow：jQuery內(nèi)容滑動特效插件的應用。本文是上(shàng)篇文章的續集，主要介紹如何運用CSS樣式來(lái)設計(jì)不同效果的滑動界面。

本文介紹了三種效果的設計(jì)：

Demo 1：小(xiǎo)圓點導航、自動切換

Demo 2：小(xiǎo)圓點導航、方向按鈕切換

Demo 3：個(gè)性化切換

經常上(shàng)迅雷看看的網友(yǒu)，應該對Demo 2很(hěn)眼熟，迅雷看看網站(zhàn)在展示影(yǐng)片的時(shí)候就用到了這種滑動效果，用來(lái)在有(yǒu)限的空(kōng)間(jiān)裏展示更多(duō)的影(yǐng)片。Demo 1 和(hé)Demo 2就是從迅雷看看得(de)到的啓發，下面我們以Demo 2為(wèi)例，講解設計(jì)過程。

XHTML

	
	

		          
	

	

		
		

			
			

				 東莞市基源科技(jì)開(kāi)發有(yǒu)限公司 
			

			

				 深圳市玫瑰石科技(jì)有(yǒu)限公司 
			

			

				 Angel mannequin 
			

		
...
	

說明(míng)：...表示重複的div.slide_wrap，有(yǒu)幾條要滾動的內(nèi)容就有(yǒu)幾個(gè)slide_wrap。

HTML DIV結構示意圖如下：

CSS

.demo{width:680px; height:138px; border:1px solid #acc6e9; background:#fff; 
margin:4px auto 20px auto; overflow:hidden}
.pro{float:left; width:210px; height:132px; margin:10px 0 6px 10px; text-align:center}
.pro img{width:200px; height:102px}
.pro a:hover{text-decoration:none; color:#f60}
#myController{height:42px; line-height:32px;  z-index:1005; position:absolute; 
margin-top:-30px; margin-left:540px}
#myController span{ padding:3px 9px; text-align:center; cursor:pointer; 
background:url(images/arr_icon.gif) no-repeat}
#myController span.j_prev{background-position:4px -81px}
#myController span.j_next{background-position:4px -54px}
#myController span.jFlowControl4{background-position:4px -2px}
#myController span.jFlowSelected4 {background-position:4px -25px}

.demo是最外層DIV，包含整個(gè)滑動內(nèi)容和(hé)導航控制(zhì)條，設置它的寬度、高(gāo)度、背景色和(hé)邊框。

.pro是控制(zhì)滾動內(nèi)容的每一個(gè)小(xiǎo)圖片和(hé)圖片标題的DIV，設置像左浮動，寬度、高(gāo)度以及間(jiān)距。

#myController是用來(lái)設置導航樣式的，設置絕對位置position:absolute，z-index值。給裏面的span标簽設置一個(gè)背景圖片arr_icon.gif，這張背景圖裏有(yǒu)圓點和(hé)方向按鈕圖标，再通(tōng)過span不同的class來(lái)設置背景圖不同的位置:background-position，這種方法隻需要一次http請(qǐng)求，然後通(tōng)過CSS來(lái)控制(zhì)圖片的位置，提高(gāo)了頁面效率。

Javascript

加入JS代碼：

$(function(){
    $("#myController").jFlow({
		slides: "#slides",
		controller: ".jFlowControl", 
		slideWrapper : "#jFlowSlide", 
		selectedWrapper: "jFlowSelected", 
		width: "680px",
		height: "138px",
		prev: ".j_prev", 
		next: ".j_next" 
	});
});

在任務完成之前别忘了将jquery庫和(hé)jFlow插件引用進來(lái)。

大(dà)功告成，去看下效果吧(ba)，如果你(nǐ)有(yǒu)更好的想法，你(nǐ)可(kě)以設計(jì)出更好的外觀效果，無非就是控制(zhì)CSS樣式。如果你(nǐ)是CSS高(gāo)手，那(nà)就盡情發揮你(nǐ)的聰明(míng)才智吧(ba)。