轉載自：
原文地址：http://www.jb51.net/article/64194.htm
原文地址：https://blog.csdn.net/u013076997/article/details/52850269
首先調用對應js文件：
|
1
2
|
<script type=
"text/javascript"
src=
"js/jquery.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery.bxslider.js"
></script>
|
jQuery代碼部分：
|
1
2
3
4
5
6
7
8
9
10
|
$(
function
(){
$(
'#marquee'
).bxSlider({
mode:
'vertical'
,
//默認的是水平
displaySlideQty:1,
//顯示li的個數
moveSlideQty: 1,
//移動li的個數
captions:
true
,
//自動控制
auto:
true
,
controls:
false
//隱藏左右按鈕
});
});
|
HTML結構如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
div
style="width:450px; height:296px; float:left;
overflow:hidden; margin-left:200px;">
<
ul
id
=
"marquee"
>
<
li
>
<
img
src
=
"img/1.jpg"
alt
=
"banner_美容"
style
=
"width:450px; height:296px;"
>
</
li
>
<
li
>
<
img
src
=
"img/2.jpg"
alt
=
"banner_美容"
style
=
"width:450px; height:296px;"
>
</
li
>
</
ul
>
</
div
>
|
CSS定義左右按鈕樣式：
|
1
2
3
4
5
6
7
8
9
10
11
|
.bx-prev{
width
:
12px
;
height
:
26px
;
background
:
#f00
;
text-indent
:
-999999px
;
z-index
:
999
;
position
:
absolute
;
float
:
left
;
left
:
455px
;
top
:
110px
;
}
.bx-next{
width
:
12px
;
height
:
26px
;
background
:
#f00
;
text-indent
:
-999999px
;
z-index
:
999
;
position
:
absolute
;
top
:
110px
;
left
:
-15px
;
}
|
參數說明：
bxSlider 詳細配置參數：
bxSlider有很多配置參數，使你能夠用參數制作出各種各樣的slider效果：
mode: 'horizontal', // 'horizontal', 'vertical', 'fade' 定義slider滾動的方向，有三個值可供選擇
infiniteLoop: true, // true, false - display first slide after last 無限循環
hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果設置true，將會在最后一個幻燈片隱藏“next”，在最前面的幻燈片因此“prev”
controls: true, // true, false - previous and next controls 是否顯示“previous”和“next”按鈕
speed: 500, // integer - in ms, duration of time slide transitions will occupy 速度，單位為毫秒
easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
pager: true, // true / false - display a pager
pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4 如果設置full，將顯示1，2，3……，如果設置short，將顯示1/4 .
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 頁碼的位置
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 頁面分隔符
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 當前頁碼的className
nextText: 'next', // string - text displayed for 'next' control 下一頁的文字
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以設置下一頁為圖片
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string - text displayed for 'previous' control 上一頁的文字
prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一頁的圖片
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false - display image captions (reads the image 'title' tag) 是否顯示圖片的標題，讀取圖片的title屬性的內容。
captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically 幻燈片自動滾動
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse 自動滾動的順序
autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自動滾動的控制鍵
autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
autoStart: true, // true, false - if false show will wait for 'start' control to activate
autoHover: false, // true, false - if true show will pause on mouseover 設置鼠標mouseover將會使自動滾動暫停
autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
pause: 3000, // integer - in ms, the duration between each slide transition 過渡時間
startText: 'start', // string - text displayed for 'start' control 開始按鈕的文字
startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' 開始按鈕的圖片
stopText: 'stop', // string - text displayed for 'stop' control 停止按鈕的文本
stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg' 停止按鈕的圖片
ticker: false, // true, false - continuous motion ticker mode (think news ticker)
// note: autoControls and autoControlsSelector apply to ticker!
tickerSpeed: 5000, // integer - has an inverse effect on speed. therefore, a value of 10000 will
// scroll very slowly while a value of 50 will scroll very quickly.
tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
tickerHover: false, // true, false - if true ticker will pause on mouseover
wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
displaySlideQty: 1, // integer - number of slides to display at once
moveSlideQty: 1, // integer - number of slides to move at once
randomStart: false, // true, false - if true show will start on a random slide
==============================================================
bxslider插件還有其他的一些參數：
下是參數列表
| 參數 | 描述 | 默認值 |
| mode | 設置滑動模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
| speed | 內容切換速度，數字，ms | 500 |
| startSlide | 初始滑動位置，數字 | 0 |
| randomStart | 隨機初始滑動位置 | true |
| infiniteLoop | 循環滑動，如果設置為true時，則到最后滑動位置時會切換到初始位置 | true |
| easing | 切換動畫擴展，可以借助jQuery Easing 動畫效果擴展設置不同的切換動畫效果 | null |
| captions | 設置顯示圖片標題，當滑動內容為圖片時並設置屬性title，可以顯示圖片標題 | false |
| video | 支持視頻，當設置為true時，需要jquery.fitvids.js支持 | false |
| pager | 設置是否顯示分頁，設置為true時，會在滑動內容下方顯示分頁圖標 | true |
| controls | 設置是否顯示上一副和下一幅按鈕 | true |
| auto | 設置是否自動滑動 | false |
| pause | 自動滑動時停留時間，數字，ms | 4000 |
| autoHover | 當鼠標滑向滑動內容上時，是否暫停滑動 |