插件描述：最全最简单最通用的 幻灯片轮播 ，可控制的插件，pc端和移动端都可完美使用
jQuery: 部分
1 2 3 4 5 6 7 8 9 10 | $(function(){ $('#marquee').bxSlider({ mode:'vertical', //默认的是水平 displaySlideQty:1,//显示li的个数 moveSlideQty: 1,//移动li的个数 captions: true,//自动控制 auto: true, controls: false//隐藏左右按钮 });}); |
HTML: 结构
1 2 3 4 5 6 | <div style="width:450px; height:296px; float:left; overflow:hidden; margin-left:200px;"> <ul id="marquee"> <li><img src="img/1.jpg" alt="banner_1" style="width:450px; height:296px;"></li> <li><img src="img/2.jpg" alt="banner_1" style="width:450px; height:296px;"></li> </ul></div> |
CSS 样式定义左右按钮
1 2 | .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效果：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | mode: 'horizontal', // 'horizontal', 'vertical', 'fade' 定义slider滚动的方向，有三个值可供选择 infiniteLoop: true, // true, false - display first slide after last 无限循环 hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果设置true，将会在最后一个幻灯片隐藏“next”，在最前面的幻灯片因此“prev” controls: true, // true, false - previous and next controls 是否显示“previous”和“next”按钮 speed: 500, // integer - in ms, duration of time slide transitions will occupy 速度，单位为毫秒 pager: true, // true / false - display a pager pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager' pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4 如果设置full，将显示1，2，3……，如果设置short，将显示1/4 . pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 页码的位置 pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 页面分隔符 pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 当前页码的className nextText: 'next', // string - text displayed for 'next' control 下一页的文字 nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以设置下一页为图片 nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next' prevText: 'prev', // string - text displayed for 'previous' control 上一页的文字 prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一页的图片 prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next' captions: false, // true, false - display image captions (reads the image 'title' tag) 是否显示图片的标题，读取图片的title属性的内容。 captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions' auto: false, // true, false - make slideshow change automatically 幻灯片自动滚动 autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse 自动滚动的顺序 autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自动滚动的控制键 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. therefore, 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 wraper 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 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 长按鼠标左键弹出快捷菜单代码
- 下一个特效： jQuery+HTML5相应式文字粒子动画