2023年7月9日发(作者：)

[前端]-jquery插件bxslider⽤法实例分析转载⾃：⾸先调⽤对应js⽂件：12jQuery代码部分：$( function (){ $( '#marquee' ).bxSlider({ mode: 'vertical' , //默认的是⽔平 displaySlideQty:1, //显⽰li的个数 moveSlideQty: 1, //移动li的个数

captions: true , //⾃动控制 auto: true , controls: false //隐藏左右按钮 });});HTML结构如下:111213< div style="width:450px; height:296px; float:left;overflow:hidden; margin-left:200px;"> < ul id = "marquee" > < li > < img src = "img/" alt = "banner_美容" style = "width:450px; height:296px;" > < li > < img src = "img/" alt = "banner_美容" style = "width:450px; height:296px;" > CSS定义左右按钮样式：-prev{width : 12px ; height : 26px ;background : #f00 ; text-indent : -999999px ; z-index : 999 ;position : absolute ; float : left ; left : 455px ; top : 110px ;}.bx-next{width : 12px ; height : 26px ;background : #f00 ; text-indent : -999999px ;z-index : 999 ;position : absolute ; top : 110px ; left : -15px ;}参数说明：bxSlider 详细配置参数：bxSlider有很多配置参数，使你能够⽤参数制作出各种各样的slider效果：randomStart: false, // true, false - if true show will start on a random slide ==============================================================

bxslider插件还有其他的⼀些参数：下是参数列表参数modespeedstartSliderandomStartinfiniteLoopeasingcaptionsvideopagercontrolsautopauseautoHover描述设置滑动模式，'horizontal':⽔平, 'vertical':垂直, 'fade':淡⼊淡出内容切换速度，数字，ms初始滑动位置，数字随机初始滑动位置循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置切换动画扩展，可以借助 Easing 动画效果扩展设置不同的切换动画效果设置显⽰图⽚标题，当滑动内容为图⽚时并设置属性title，可以显⽰图⽚标题⽀持视频，当设置为true时，需要⽀持设置是否显⽰分页，设置为true时，会在滑动内容下⽅显⽰分页图标设置是否显⽰上⼀副和下⼀幅按钮设置是否⾃动滑动⾃动滑动时停留时间，数字，ms当⿏标滑向滑动内容上时，是否暂停滑动默认值horizontal5000truetruenullfalsefalsetruetruefalse4000