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
学习了,想知道博主选择文字有个红色的数字上升效果是如何实现的,忘不吝赐教!
感觉插件有些效果挺不错大了
这个插件还不错…
收藏啦。。。。
这个功能好像不错啊,收藏了,现在还用不到。
挺会研究的
咦,我刚才的留言呢……
什么叫响应式呢。
嗯!这个插件好!!!