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。
//