响应式幻灯片插件:bxSlider

9月 29, 2013 4 条评论 970 次阅读 0 人点赞

bxSlider

为什么要选择这个插件?

  • 充分响应 - 将适应任何设备
  • 水平,垂直和淡入淡出模式
  • 幻灯片可以包含图像,视频或HTML内容
  • 支持内置先进的触摸/滑动
  • 使用CSS过渡幻灯片动画(原生硬件加速!)
  • 全的回调API和公共方法
  • 小文件的大小,充分主题,简单实现
  • 浏览器支持:火狐,Chrome浏览器,Safari浏览器,IOS,Android的,IE7 +
  • 自定义的配置选项

如何安装

  1. 引入所需的文件
    <!-- jQuery library (served from Google) -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- bxSlider Javascript file -->
    <script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>
    <!-- bxSlider CSS file -->
    <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
  2. 创建HTML标记
    <ul class="bxslider">
      <li><img src="/images/pic1.jpg" /></li>
      <li><img src="/images/pic2.jpg" /></li>
      <li><img src="/images/pic3.jpg" /></li>
      <li><img src="/images/pic4.jpg" /></li>
    </ul>
  3. 调用bxSlider
    $(document).ready(function(){
      $('.bxslider').bxSlider();
    });

下载、演示页面

孑愁

一个Microsoft、Google、Apple的爱好者综合体,喜欢一切和数码科技有关的东西,也希望能及时的把这些分享给关注它们的人。现就职于某互联网公司,担任前端

文章评论(4)

  • 鲜活

    还没用过类似的插件

    10月 11, 2013
  • 椒盐虾

    模板是买的?

    10月 7, 2013
    • 孑愁

      @椒盐虾 @椒盐虾: 是下载的,然后改了下去掉了验证,打算换掉这个皮

      10月 13, 2013