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 库：
1 | <!-- jQuery library (served from Google) --> |
2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
3 | <!-- bxSlider Javascript file --> |
4 | <script src="/js/jquery.bxslider.min.js"></script> |
5 | <!-- bxSlider CSS file --> |
6 | <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> |
jquery.bxslider.zip下载地址 http://bxslider.com/lib/jquery.bxslider.zip
2. 在需要调用幻灯片的地方添加：
2 | <li><img src="/images/pic1.jpg" /></li> |
3 | <li><img src="/images/pic2.jpg" /></li> |
4 | <li><img src="/images/pic3.jpg" /></li> |
5 | <li><img src="/images/pic4.jpg" /></li> |
3. 调用 bxSlider:
1 | <script type="text/javascript"> |
2 | $(document).ready(function(){ |
3 | $('.bxSlides').bxSlider(); |
更多示例请参照：http://bxslider.com/examples
spendl
学习了，想知道博主选择文字有个红色的数字上升效果是如何实现的，忘不吝赐教！
感觉插件有些效果挺不错大了
这个插件还不错…
收藏啦。。。。
这个功能好像不错啊，收藏了，现在还用不到。
挺会研究的
咦，我刚才的留言呢……
什么叫响应式呢。
嗯！这个插件好！！！