jquery插件bxslider用法实例分析
本文实例讲述了jquery插件bxslider用法。分享给大家供大家参考。具体用法如下：
首先调用对应js文件：
<scripttype="text/javascript"src="js/jquery.js"></script> <scripttype="text/javascript"src="js/jquery.bxslider.js"></script>
jQuery代码部分：
$(function(){
$('#marquee').bxSlider({
mode:'vertical',//默认的是水平
displaySlideQty:1,//显示li的个数
moveSlideQty:1,//移动li的个数
captions:true,//自动控制
auto:true,
controls:false//隐藏左右按钮
});
});
HTML结构如下:
<divstyle="width:450px;height:296px;float:left; overflow:hidden;margin-left:200px;"> <ulid="marquee"> <li> <imgsrc="img/1.jpg"alt="banner_美容" style="width:450px;height:296px;"> </li> <li> <imgsrc="img/2.jpg"alt="banner_美容" style="width:450px;height:296px;"> </li> </ul> </div>
CSS定义左右按钮样式：
.bx-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效果：
mode:'horizontal',//'horizontal','vertical','fade'定义slider滚动的方向，有三个值可供选择
infiniteLoop:true,//true,false-displayfirstslideafterlast无限循环
hideControlOnEnd:false,//true,false-iftrue,willhide'next'controlonlastslideand'prev'controlonfirst如果设置true，将会在最后一个幻灯片隐藏“next”，在最前面的幻灯片因此“prev”
controls:true,//true,false-previousandnextcontrols是否显示“previous”和“next”按钮
speed:500,//integer-inms,durationoftimeslidetransitionswilloccupy 速度，单位为毫秒
easing:'swing',//usedwithjquery.easing.1.3.js-seehttp://gsgd.co.uk/sandbox/jquery/easing/foravailableoptions
pager:true,//true/false-displayapager
pagerSelector:null,//jQueryselector-elementtocontainthepager.ex:'#pager'
pagerType:'full',//'full','short'-if'full'pagerdisplays1,2,3...if'short'pagerdisplays1/4 如果设置full，将显示1，2，3……，如果设置short，将显示1/4.
pagerLocation:'bottom',//'bottom','top'-locationofpager页码的位置
pagerShortSeparator:'/',//string-ex:'of'pagerwoulddisplay1of4页面分隔符
pagerActiveClass:'pager-active',//string-classnameattachedtotheactivepagerlink当前页码的className
nextText:'next',//string-textdisplayedfor'next'control下一页的文字
nextImage:'',//string-filepathofimageusedfor'next'control.ex:'images/next.jpg'可以设置下一页为图片
nextSelector:null,//jQueryselector-elementtocontainthenextcontrol.ex:'#next'
prevText:'prev',//string-textdisplayedfor'previous'control上一页的文字
prevImage:'',//string-filepathofimageusedfor'previous'control.ex:'images/prev.jpg'上一页的图片
prevSelector:null,//jQueryselector-elementtocontainthepreviouscontrol.ex:'#next'
captions:false,//true,false-displayimagecaptions(readstheimage'title'tag)是否显示图片的标题，读取图片的title属性的内容。
captionsSelector:null,//jQueryselector-elementtocontainthecaptions.ex:'#captions'
auto:false,//true,false-makeslideshowchangeautomatically幻灯片自动滚动
autoDirection:'next',//'next','prev'-directioninwhichautoshowwilltraverse自动滚动的顺序
autoControls:false,//true,false-show'start'and'stop'controlsforautoshow自动滚动的控制键
autoControlsSelector:null,//jQueryselector-elementtocontaintheautocontrols.ex:'#auto-controls'
autoStart:true,//true,false-iffalseshowwillwaitfor'start'controltoactivate
autoHover:false,//true,false-iftrueshowwillpauseonmouseover设置鼠标mouseover将会使自动滚动暂停
autoDelay:0,//integer-inms,theamountoftimebeforestartingtheautoshow
pause:3000,//integer-inms,thedurationbetweeneachslidetransition 过渡时间
startText:'start',//string-textdisplayedfor'start'control开始按钮的文字
startImage:'',//string-filepathofimageusedfor'start'control.ex:'images/start.jpg'开始按钮的图片
stopText:'stop',//string-textdisplayedfor'stop'control停止按钮的文本
stopImage:'',//string-filepathofimageusedfor'stop'control.ex:'images/stop.jpg' 停止按钮的图片
ticker:false,//true,false-continuousmotiontickermode(thinknewsticker)
//note:autoControlsandautoControlsSelectorapplytoticker!
tickerSpeed:5000,//integer-hasaninverseeffectonspeed.therefore,avalueof10000will
//scrollveryslowlywhileavalueof50willscrollveryquickly.
tickerDirection:'next',//'next','prev'-directioninwhichtickershowwilltraverse
tickerHover:false,//true,false-iftruetickerwillpauseonmouseover
wrapperClass:'bx-wrapper',//string-classnameattachedtothesliderwraper
startingSlide:0,//integer-showwillstartonspecifiedslide.note:slidesarezerobased!
displaySlideQty:1,//integer-numberofslidestodisplayatonce
moveSlideQty:1,//integer-numberofslidestomoveatonce
randomStart:false,//true,false-iftrueshowwillstartonarandomslide
希望本文所述对大家的jQuery程序设计有所帮助。