RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
你可能遇到了下面的问题
关闭右侧工具栏
页面轮播图所用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