bxSlider - jQuery内容滑块插件

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代码
<ul>
 <li>first piece of content</li>
 <li>second piece of content</li>
 <li>third piece of content</li>
 <li>fourth piece of content</li>
 <li>bxCarousel can accept an unlimited number of elements</li>
</ul>

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插件循环优越的功能。