图片间断滚动---jQuery插件bxCarousel

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件，特征主要有：

Ø  可以指定显示的元素数

Ø  可以指定每次滚动元素数

Ø  自动播放模式

Ø  前一张/后一张按钮控制图片流动

 

下面我看两个BxCarousel的Demo

         DEMO One 控制左右滚动

Jquery代码

$(document).ready(function(){

         $('#example1').bxCarousel({

                 display_num: 4,

                 move: 2,

                 prev_image: 'images/icon_arrow_left.png',

                 next_image: 'images/icon_arrow_right.png',

                 margin: 10

         });

});

解释：

display_num：显示元素的数量，此处显示4张图片

move：单击左右控制键时，移动的元素个数，此处为移动2张图片

prev_image：上一元素按钮图片

next_image：下一元素按钮图片

margin：图片之间的间隙，此处为10px

首先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>

bxCarousel参数说明：

move：每次滚动移动图片的数量，默认为4。

display_num：展示图片的数量，默认为4。

speed：图片滚动速度，默认为500毫秒。

margin：图片间的间距，默认为0。

auto：是否自动滚动，默认为false。

auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。

auto_dir：自动滚动的方向，默认为next，你可以试下prev。

next_image：向右滚方向按钮图片，可以用CSS设置。

prev_image：向左滚方向按钮图片，可以用CSS设置。

next_text: 'next', // text to be used for the 'next' control

prev_text: 'prev', // text to be used for the 'prev' control

auto_hover：滚动时，鼠标滑上图片时是否停止滚动，默认为false。

controls：是否显示左右滚动按钮图片，默认为true。

//