本例實現了一系列圖片滾動的效果，适合用在需要展示圖片庫或合作(zuò)夥伴友(yǒu)情鏈接圖片之類的網站(zhàn)首頁。可(kě)以控制(zhì)圖片滾動的速度、自動/手動滾動圖片、支持鼠标懸停等。

XHTML

XHTML由一組圖片構成的無序列表ul，給ul一個(gè)id屬性用于JS調用，另外ul的父級div.bx_container和(hé)div.bx_wrap是必需的。此外記得(de)在head間(jiān)載入jquery庫和(hé)滾動所需的js插件：

CSS

.bx_wrap {margin-left: 10px; margin-top:10px}
.bx_wrap ul img { border: 2px solid #ddd; }
.bx_wrap ul li{text-align:center}
.bx_wrap ul li a:hover{text-decoration:none; color:#f30}
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0;
position:absolute; top:45px; left:-2px; text-indent:-999em; background: url(img/arr_left.gif) 
no-repeat;}
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:626px;position: absolute;
top:45px; text-indent:-999em; background:url(img/arr_right.gif) no-repeat;}

如果要使用方向按鈕導航，則需要設置.bx_wrap a.prev和(hé).bx_wrap a.next的樣式。

jQuery

$("#demo1").bxCarousel({
	display_num: 4, 
	move: 1, 
	auto: true, 
	controls: false,
	margin: 10
});

bxCarousel參數(shù)說明(míng)：

move：每次滾動移動圖片的數(shù)量，默認為(wèi)4。

display_num：展示圖片的數(shù)量，默認為(wèi)4。

speed：圖片滾動速度，默認為(wèi)500毫秒(miǎo)。

margin：圖片間(jiān)的間(jiān)距，默認為(wèi)0。

auto：是否自動滾動，默認為(wèi)false。

auto_interval：當設為(wèi)自動滾動時(shí)，每次滾動的時(shí)間(jiān)間(jiān)隔（毫秒(miǎo)），默認為(wèi)2000毫秒(miǎo)即2秒(miǎo)。

auto_dir：自動滾動的方向，默認為(wèi)next，你(nǐ)可(kě)以試下prev。

next_image：向右滾方向按鈕圖片，可(kě)以用CSS設置。

prev_image：向左滾方向按鈕圖片，可(kě)以用CSS設置。

auto_hover：滾動時(shí)，鼠标滑上(shàng)圖片時(shí)是否停止滾動，默認為(wèi)false。

controls：是否顯示左右滾動按鈕圖片，默認為(wèi)true。