响应式幻灯片插件: bxSlider

bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。(具体示例请参考官网:http://bxslider.com/)
bxSlider 详细功能如下:
Fully responsive - will adapt to any device;
Horizontal, vertical, and fade modes;
Slides can contain images, video, or HTML content;
Advanced touch / swipe support built-in;
Uses CSS transitions for slide animation (native hardware acceleration!);
Full callback API and public methods;
Small file size, fully themed, simple to implement;
Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+;
Tons of configuration options;

1. 首先加载 jQuery JS 库和下载并加载 bxSlider 的 JS 和 CSS 库:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

jquery.bxslider.zip下载地址 http://bxslider.com/lib/jquery.bxslider.zip
2. 在需要调用幻灯片的地方添加:

<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:

<script type="text/javascript">
$(document).ready(function(){
  $('.bxSlides').bxSlider();
});
</script>

更多示例请参照:http://bxslider.com/examples

评论 ( 22)
  1. 沙发
    陌小雨 2014-11-25 07:00

    学习了,想知道博主选择文字有个红色的数字上升效果是如何实现的,忘不吝赐教!

  2. 板凳
    刘荣焕 2013-08-26 03:16

    感觉插件有些效果挺不错大了

  3. 地板
    麦田一根葱 2013-08-09 06:24

    我是自动报时,现在是[2013年8月9日下午2:24:54]

  4. 4 楼
    过往云烟 2013-08-08 08:18

    这个插件还不错…

  5. 5 楼
    BJD娃娃 2013-08-08 06:55

    收藏啦。。。。

  6. 6 楼
    从良未遂 2013-08-07 09:46

    这个功能好像不错啊,收藏了,现在还用不到。

    • 回复
      andy 2013-08-07 11:58
      @从良未遂 @从良未遂 : :twisted: 其实首页那个图片可以换成幻灯片滴
  7. 7 楼
    俄罗斯服务器 2013-08-07 04:03

    挺会研究的

  8. 8 楼
    秦天添 2013-08-06 14:52

    咦,我刚才的留言呢……

    • 回复
      andy 2013-08-07 02:17
      @秦天添 @秦天添 : :?: 在垃圾评论中,换邮箱了么
      • 回复
        秦天添 2013-08-07 02:18
        @andy @andy : 没有换,刚才用错呢称了,上面留言就是我,用了某人的呢称 :arrow:
        • 回复
          andy 2013-08-07 02:22
          @秦天添 @秦天添 : :twisted: 网站后面带/和不带 还影响 友情链接认证图标啊
          • 秦天添 2013-08-07 02:25
            @andy @andy : 额,这个我就不懂了。 没想到这么复杂的。
  9. 9 楼
    思亭 2013-08-06 14:50

    什么叫响应式呢。

  10. 10 楼
    QQ农场 2013-08-06 06:46

    嗯!这个插件好!!!