頁面輪播圖所用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