bxSlider特性
1.充分响应各种设备,适应各种屏幕;
2.支持多种滑动模式,水平、垂直以及淡入淡出效果;
3.支持图片、视频以及任意html内容;
4.支持触摸滑动;
5.支持Firefox,Chrome,Safari,iOS,Android,IE7+
如何使用bxSlider
1、首先是加载jQuery库,以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider。
<linkrel="stylesheet"type="text/css"href="jquery.bxslider.css"> <scriptsrc="///ajax/libs/jquery/1.8.2/jquery.min.js"></script> <scriptsrc="jquery.bxslider.min.js"></script>
2、准备滑动内容,我们创建一个ul.bxslider,然后在其子元素li中加入滑动内容,滑动内容可以是图片、视频以及任意html内容:
<ulclass="bxslider"> <li><imgsrc="images/s1.jpg"/></li> <li><imgsrc="images/s2.jpg"/></li> <li><imgsrc="images/s3.jpg"/></li> </ul>
3、调用bxSlider插件,当页面内容加载完时调用bxSlider。
$(function(){ $('.bxslider').bxSlider(); });
bxSlider选项设置
bxSlider提供了丰富的选项可配置,以下我们列出最主要也是最常用的选项设置。
更多bxSlider的选项设置,请参照bxSlider官网:/options