jFlow是一款非常好的內(nèi)容滑動(也有(yǒu)人(rén)稱幻燈片)jquery插件，它主要用在網站(zhàn)的首頁突出位置用來(lái)展示網站(zhàn)的最新動态、最新活動或最新産品等。

jFlow特點：

平滑過渡緩沖滑動；

可(kě)定制(zhì)的是否自動滑動；

輕量級腳本，大(dà)小(xiǎo)不到4KB；

滑動內(nèi)容可(kě)定制(zhì)，可(kě)以是大(dà)幅圖片，也可(kě)以是文本或者圖文混排。

應用實例：

關于jFlow的應用，網上(shàng)很(hěn)多(duō)文章隻是援引了官方的例子，其實仔細研究，你(nǐ)會(huì)發現能實現很(hěn)多(duō)漂亮的界面效果。

1、TAB滑動切換內(nèi)容

2、數(shù)字導航滑動自動切換

3、方向按鈕導航滑動切換

使用方法：

1、在HTML頁面的head标簽之間(jiān)加入以下代碼：

2、在body中加入以下代碼：

	
	

		
		

			 
		

		

			 
		

		

			 
		

	

	

		< 1 2 3 > 
	

注意：ID為(wèi)“myController”的DIV是主控制(zhì)層，裏面包含分頁數(shù)字和(hé)導航箭頭，ID為(wèi)“slides”裏面包含了滑動內(nèi)容，可(kě)以是圖片、文字等任何HTML元素的內(nèi)容，值得(de)注意的是class為(wèi)“jFlowControl”裏的span的個(gè)數(shù)要與class為(wèi)“slide_wrap”的DIV個(gè)數(shù)要一緻，如果你(nǐ)不想顯示導航數(shù)字或按鈕，你(nǐ)可(kě)以在CSS樣式裏設置。

3、CSS代碼：

#myController{height:32px; line-height:32px; padding-right:20px; 
background:#333; font-weight:bold; font-size:14px; text-align:right; 
white-space:nowrap; z-index:1001; position:relative; margin-top:-32px; 
filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
#myController span{ padding:0 4px; text-align:center; cursor:pointer; 
color:#fff}
#myController span.jFlowSelected {background:#d3d3d3; color:#333}