文章目录[隐藏]
- 要实现上面的效果,我么加载 jQuery 和 bxSilder 的代码之后,还需要在页面的 head 中添加如下的 jQuery 代码:
$(document).ready(function(){ $('#example3').bxSlider({ mode: 'fade', speed: 3000, next_text: '下一张', prev_text: '上一张', width: 307, wrapper_class: 'example3_container' });});
其他的效果请查看 bxSlider 的演示页面。
bxSlider 详细配置参数
bxSlider 有以下参数可以进行配置:
- mode: 模式,可以指定 ‘slide’, ‘fade’, ‘ticker’ 这三种模式。
- speed: 速度,变换的时间,单位是毫秒。
- auto: 是否自动变换。
- controls: 用于添加按钮来进行手动变化,(可以和 auto 混合一起使用)。
- pause: 两次变换之间停留的时间(在 auto 为 true 才有效)。
- width: 容器元素的宽度(单位是像素)。
- prev_text: 上一个按钮的问本。
- next_text: 下一个按钮的文本。
- prev_img: 上一个按钮的图片。
- next_img: 下一个按钮的图片。
- ticker_direction: 滚动的方向,模式为 ‘ticker’ 才有效。
- wrapper_class: 容器元素的 class 名字。
下载:bxSlider