合作
咨詢
幫助
建站咨詢 
頁面輪播圖所用jQuery插件bxSlider參數說明
- 作者：虚拟货币行情科技
- 發表時間：2017-04-25 13:26
- 來源：未知
幾乎所有新疆網站建設都有用到輪播圖的效果，輪播圖的插件也有很多，其中有easySlider、bxSlider等。easySlider使用起來也很簡便，但其效果不如bxslider好，easyslider在圖片的輪播過程中，從上一幅到下一幅之間有明顯的過渡感，而bxSlider裡可以設置圖片的過渡模式為"fade"模式，圖片輪播起來後過渡自然，效果要好于easySlider。
同時bxSlider的使用方法也很簡單，引入jQuery庫後隻需一句$('#slider').bxSlider();即可，bxSlider的參數主要有以下：
普通參數：虚拟货币行情
mode: 輪播圖切換方式
default: 'horizontal' , options: 'horizontal', 'vertical', 'fade'
speed: 輪播圖切換時間(單位：ms)
default: 500, options: integer
slideMargin: 每幅輪播圖的邊距
default: 0, options: integer
startSlide: 從哪一幅圖開始輪播
default: 0, options: integer
randomStart: 随機開始輪播
default: false, options: boolean
slideSelector: 用于輪播的選擇符
default: '', options: jQuery selector
infiniteLoop: 無限循環，當設置為true時，輪播到最後一幅圖片時點擊下一張會播放第一張，反之亦然
default: true， options：boolean
easing：輪播時的切換曲線
default: null, options: 'linear', 'ease', 'ease-in', 'ease-out'
hideControlOnEnd: 輪播到最後一幅圖時隐藏下一張的控制按鈕
default: false, options: boolean
captions: 輪播圖下面是否加圖片标題說明，注：圖片的标題說明從圖片的title屬性中獲取
default: false, options: boolean
ticker: 以ticker模式使用輪播圖
default: false, options: boolean
tickerHover: 當使用ticker模式使用輪播圖是，鼠标移動到圖片上是否停止
default: false, options: boolean
adaptiveHeight: 是否依據圖片本身的高度自動調整輪播圖高度
default: false, options: boolean
adaptiveHeightSpeed: 如果依據圖片本身的高度自動調整輪播圖高度時，圖片高度調整速度參數
default：500， options：integer
video：如果輪播圖含有視頻，設置此參數為true
default: false, options: boolean
responsive: 自動調整輪播圖寬度，在輪播效果寬度固定的情況下有用
default：true， options：boolean
useCss：如果值為真，則使用css過渡，否則使用jquery過渡
default：true， options：boolean
preloadImages：預加載圖片的模式，分為all和visible，如果為all模式，則會在所有圖片都加載後開始輪播，如果為visible模式，則在第一個需要輪播的圖片加載後開始輪播
default：'visible'， options：'all', 'visible'
pager: 是否添加頁碼效果
default: true, options: boolean
pagerType: 頁碼效果的模式
default: 'full', options: 'full', 'short'
pagerShortSeparator: 頁碼效果模式為短模式是的 分隔符
default：'/', options: string
pagerSelector: 頁碼效果的選擇符，默認情況下頁面效果會被添加在bx-viewport選擇符下
default：'', options: jquery selector
controls: 上一頁下一頁控制按鈕
default：true， options：boolean
nextText：下一頁控制按鈕文字
default：'next', options: string
prevText: 上一頁控制按鈕文字
default：'prev'， options：string
nextSelector：下一頁控制按鈕的選擇符
default：null， options：jQuery Selector
prevSelector：上一頁控制按鈕的選擇符
default：null， options：jquery Selector
autoControls：如果設置為真，則開始、停止控制按鈕會被添加
default：false， options：boolean
startText：開始按鈕文字
default：'start', options: string
stopText: 停止按鈕文字
default：'stop', options: string
auto: 輪播圖自動切換
default：false， options：boolean
pause：輪播圖每播放一幅圖的停留時間(單位：ms)
default：4000， options：integer
autoStart：輪播圖自動開始播放
default：true， options：boolean
autoDirection：輪播圖自動播放的方向，向前還是向後，默認為向後
default：'next', options: 'next', 'prev'
autoHover：當鼠标停留在輪播圖上時，輪播是否停止
default：false， options：boolean
autoDelay：輪播自動開始前等待時間（單位：ms）
default：0， options：integer
另外還有一些其他的參數羅列如下：虚拟货币行情
touchEnabled,swipeThreshold,oneToOneTouch,preventDefaultSwipeX,preventDefaultSwipeY,pagerCustom, buildPager, autoControlsCombine, autoControlsSelector， minSlides，maxSlides, moveSlides, slideWidth
該輪播插件還有一些自定義回調函數和公有方法可供調用：
回調函數：onSliderLoad，onSlideBefore，onSlideAfter，onSlideNext，onSlidePrev
公有方法：goToSlide，goToNextSlide，goToPrevSlide，startAuto，stopAuto，getCurrentSlide，getSlideCount，reloadSlider，destroySlider