MBB类似jquery.bxslider插件轮播效果

首先，如图一：当打开页面是，产品出现了淡入淡出切换轮播状态，当鼠标点击左边的小图时，就会切换出相对应的大图，当鼠标移开的时候，这个轮播就会停止自动轮播，只有人工手动才能进行切换；是一个不错的体验！



如图二：当页面打开时，大广告图会五秒向左切换轮播，当鼠标点击到左右两边的上一页，下一页按钮时，大图会随着切换到下一张图片，当点击下面的小图时，才会出现小图所在的大图位置，当鼠标移开之后，大图就不会继续轮播切换了，只有当鼠标点击时候才会继续切换！



这个插件效果是多变的，其中，Javascript的代码如下

$(function() {

$("#top-slider").bxSlider({
mode: "fade",
displaySlideQty: 1,
moveSlideQty: 1,
auto: true,
speed: 500,
pause: 3000,
easing: 'easeOutQuint',
pager: true,
pagerSelector: ".top-slider-pager"
});

$("#slider-2").bxSlider({
mode: "horizontal",
nextSelector:"#bx-next",
prevSelector:"#bx-prev",
displaySlideQty: 1,
moveSlideQty: 1,
auto: true,
speed: 1300,
pause: 3000,
pager: true,
pagerSelector: ".slider-2-pager"
});

});

下面介绍一些相关jquery.bxslider插件说明参数：

mode:'horizontal', //'horizontal','vertical','fade'定义slider滚动的方向，有三个值可供选择

infiniteLoop:true, //true,false 无限循环

hideControlOnEnd:false, //true,false 如果设置true,将会再最后一个幻灯片隐藏"next"，在最前面的幻灯片银牌"prev"

controls:true, //true,false 是否显示“previous”和“next”按钮

speed:500, // 速度，单位为毫秒

easing:'swing', //used with jquery.easing.1.3.js-see http://gsgd.co.uk/sandbox/jquery/easing/ for available options

pager:true, //true false-display a pager

pagerSelector:null, //jQuery selector - element to contain the pager.ex:'#pager'

pagerType:'full', //如果设置full，将显示1,2,3.。。。，如果设置short，将显示1/4

pagerLocation:'bottom', //页面的位置

pagerShortSeparator:'/', //页面分隔符

pagerActiveClass:'pager-active', //当前页码的className

nextText:'next', //下一页的文字

nextImage:'', //可以设置下一页为图片

nextSelector:'null', //jQuery selector -element to contain the next control 比如:'#next'

prevText:'prev', //上一页的文字

prevImage:'', //上一页的图片

prevSelector:null, //jQuery selector - element to contain the previous control 比如:'#prev'

caption:false, //true,false - 是否显示图片的标题，读取图片的title属性的内容

captionSelector:null, //jQuery selector - element to contain the captions. ex:'#captions'

auto:false, //true,false 幻灯片自动滚动

autoDirection:'next', //true,false 自动滚动的顺序

autoControls:false, //true,false - 自动滚动的控制键

autoControlsSelector:null, //jQuery selector - element to contain the auto controls ex:'#auto-controls'

autoStart:true, //true,false - if false show will wait for 'start' control to activate

autoHover:false, //true,false - if true show will pause on mouseover 设置鼠标mouseover将会使自动滚动暂停

autoDelay:0, //integer - in ms,the amount of time before starting the auto show

pause:3000, //integer - in ms,the duration between each slide transition 过渡时间

startText:'start', //string - text displayed for 'start' control 开始按钮的文字

startImage:'', //string - filepath of image used for 'start' control.ex:'images/start.jpg' 开始按钮的图片

stopText:'stop', //string - text displayed for 'stop' control 停止按钮的文本

stopImage:'', //string - filepath of image used for 'stop' control.ex:'images/stop.jpg' 停止按钮的图片

ticker:false, //true,false - continuous motion ticker mode(think news ticker)

//note:autoControls and autoControlsSelector apply to ticker!

tickerSpeed:5000, //integer - has an inverse effect on speed therefor,a value of 10000 will

//scroll very slowly while a value of 50 will scroll very quickly

tickerDirection:'next', //'next','prev' - direction in which ticker show will traverse

tickerHover:false, //true,false - if true ticker will pause on mouseover

wrapperClass:'bx-wrapper', //string - classname attached to the slider wrapper

startingSlide:0, //integer - show will start on specified slide,note:slides are zero based!

displaySlideQty:1, //integer - number of slides to display at once

moveSlideQty:1, //integer - number of slides to move at once

randomStart:false, //true,false - if true show will start on a random slide

另外，文件例子分享网址：http://yunpan.cn/QI5hy4jj8aqfC