欢迎光临
安安一直在努力
Hi,欢迎光临安安博客

响应式 jQuery Slider 插件: bxSlider

今天做worldpress主题的,百度搜索找响应式幻灯插件,百度是搜索了不少,基本功能大同小异,没有新的功能什么的。突然眼睛一亮发现新大陆 bxSlider。

bxslider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。

bxSlider 详细功能

  • 完全响应式:支持所有设备。
  • 支持水平,垂直和淡入淡出等模式。
  • 支持图片,视频和 HTML 内容等幻灯片。
  • 内置支持触摸和滑动等高级操作。
  • 使用 CSS transitions 来实现幻灯片动画(原生硬件加速)。
  • 完整的回调 API 和接口。
  • 插件体积非常小,但是包含完整的主题,非常容易集成。
  • 支持 Firefox, Chrome, Safari, iOS, Android, IE7+ 等几乎所有的浏览器。
  • 非常详细的功能配置选项。

bxslider

使用方法:

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

<!-- jQuery library (served from Google) -->
<script src="//ajax.useso.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" />

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();
});

bxSlider选项设置参数:演示 请查看 http://bxslider.com/options

 

相关推荐

    暂无内容!

发表评论 1