页面轮播图所用jQuery插件bxSlider参数说明

Posted 2021-04-08 小鱼名片

普通参数：

 

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