合作
咨询
帮助
建站咨询 
页面轮播图所用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