bxSlider是一个jQuery插件内容滑块,重量轻,易于使用。特点:水平和垂直滑动运动自动模式启动/停止控制前/下一个控数字导航连续播报模式jQuery代码$(document).ready(function(){ $('#slides1').bxSlider({ prev_image: 'images/btn_arrow_left.jpg', next_image: 'images/btn_arrow_right.jpg', wrapper_class: 'slides1_wrap', margin: 70, auto: true, auto_controls: true });});实现和配置尽管插件可以应用于任何元素,其中包含孩子,bxSlider效果最好,如果应用于< ul >一样:HTML代码
- first piece of content
- second piece of content
- third piece of content
- fourth piece of content
- bxCarousel can accept an unlimited number of elements
jQuery代码$(document).ready(function(){ $('ul').bxSlider({ alignment: 'horizontal', // 'horizontal', 'vertical' - direction in which slides will move controls: true, // determines if default 'next'/'prev' controls are displayed speed: 500, // amount of time slide transition lasts (in milliseconds) pager: true, // determines if a numeric pager is displayed (1 2 3 4...) pager_short: false, // determines if a 'short' numeric pager is displayed (1/4) pager_short_separator: ' / ', // text to be used to separate the short pager margin: 0, // if 'horizontal', applies a right margin to each slide, if 'vertical' a // bottom margin is applied. example: margin: 50 next_text: 'next', // text to be displayed for the 'next' control next_image: '', // image to be used for the 'next' control prev_text: 'prev', // text to be displayed for the 'prev' control prev_image: '', // image to be used for the 'prev' control auto: false, // determines if slides will move automatically pause: 3500, // time between each slide transition (auto mode only) auto_direction: 'next', // order in which slides will transition (auto mode only) auto_hover: true, // determines if slideshow will pause while mouse is hovering over slideshow auto_controls: false, // determines if 'start'/'stop' controls are displayed (auto mode only) ticker: false, // determines if slideshow will behave as a constant ticker ticker_controls: false, // determines if 'start'/'stop' ticker controls are displayed (ticker mode only) ticker_direction: 'next', // order in which slides will transition (ticker mode only) ticker_hover: true, // determines if slideshow will pause while mouse is hovering over slideshow stop_text: 'stop', // text to be displayed for the 'stop' control start_text: 'start', // text to be displayed for the 'start' control wrapper_class: 'bxslider_wrap' // class name to be used for the outer wrapper of the slideshow });});笔记和技巧bxSlider可以无限循环。例子:单击“next”控制反复将附加幻灯片本身bxSlider v2.0不再支持“褪色”过渡。请使用jQuery插件循环优越的功能。 ![bxSlider - jQuery内容滑块插件]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······