响应式 jQuery Slider 插件: bxSlider

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

bxSlider 详细功能

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

响应式 jQuery Slider 插件: bxSlider

使用 bxSlider

在介绍 bxSlider 使用之前,先看下 bxSlider 演示(RSS 用户需要返回网站查看):

  • WordPress:企业建站利器WordPress:企业建站利器
    WordPress 是一款风靡全球的开源 CMS 系统。在过去,它更多的应用于开设个人或多用户博客系统;但现在,它开始越来越多地应用于企业门户网站设计中。作为国内最早使用并对 WordPress 进行二次开发的爱好者之一,自从2006年初次接触 WordPress 系统开始,我就为其强大的功能,灵活的可扩展性,以及方便的可定制性所深深吸引。
  • 美国虚拟主机推荐:Bluehost美国虚拟主机推荐:Bluehost
    Bluehost 建立于 1996 年,已经具有了十几年的虚拟主机服务经验,现已突破 100 万的网站托管数量,并且还以稳定速度向前发展。Bluehost 以其高质量的主机和口碑,在美国是深受好评的虚拟主机,在美国主机界也是屡获大奖。
  • bbPress 介绍,安装和中文包bbPress 介绍,安装和中文包
    bbPress 是一款开源论坛程序,它是一个非常容易使用的轻量级论坛程序,由于 bbPress 保持了体积小,重量轻,没有提供过多复杂的功能,所以速度非常快。对于有更多需求的用户来说,bbPress 也和 WordPress 一样提供了一个非常强大插件系统,让你添加各种功能扩充论坛。
  • 主机推荐:(mt) Media Temple主机推荐:(mt) Media Temple
    Media Temple 简称 (mt) ,是一家比较独特的美国主机商,和其他美国商一样大肆的做广告不一样,(mt) 更关注社区,它的营销计划可以简单归纳为:Host Great Sites,所以选择了 (mt),就选择和许多伟大的站点做邻居。我爱水煮鱼目前正在使用 Media Temple 主机。
  • WordPress 相关日志插件:WordPress Related PostsWordPress 相关日志插件:WordPress Related Posts
    产生相关日志最好的方法就是通过 Tag,根据日志含有相同的 Tag 数越多,就认为日志相关性越强,所以我根据这一原理开发了 WordPress Related Posts 这个 WordPress 插件,它会根据日志的 tag 的相关性产生一个相关日志列表。
  • WordPress 主题教程:从零开始制作 WordPress 主题WordPress 主题教程:从零开始制作 WordPress 主题
    创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题。本文是一个从零开始制作 WordPress 主题的教程,它会一步一步教你如何制作 WordPress 主题。

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" />

2. 创建一个对应的 HTML 代码:


<ul class="bxslider">
  <li><img data-raw="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/22fc24ccad6fa7e5ef8dadd78dc2e954.jpg" srcset="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/22fc24ccad6fa7e5ef8dadd78dc2e954.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/1200/interlace/1/q/70 2x" src="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/22fc24ccad6fa7e5ef8dadd78dc2e954.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/600/interlace/1/q/70" /></li>
  <li><img data-raw="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/d36bae5d9cd370376c3b1efa95539061.jpg" srcset="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/d36bae5d9cd370376c3b1efa95539061.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/1200/interlace/1/q/70 2x" src="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/d36bae5d9cd370376c3b1efa95539061.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/600/interlace/1/q/70" /></li>
  <li><img data-raw="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/b9909b949543076606e70bac575817d8.jpg" srcset="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/b9909b949543076606e70bac575817d8.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/1200/interlace/1/q/70 2x" src="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/b9909b949543076606e70bac575817d8.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/600/interlace/1/q/70" /></li>
  <li><img data-raw="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/86310580700cceb24c6c6804ca368278.jpg" srcset="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/86310580700cceb24c6c6804ca368278.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/1200/interlace/1/q/70 2x" src="http://77flz7.com1.z0.glb.clouddn.com/qiniu/2029/image/86310580700cceb24c6c6804ca368278.jpg?watermark/1/image/aHR0cDovL3dwamFtLnFpbml1ZG4uY29tL3dwamFtL3dhdGVybWFyay5wbmc=/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim%7CimageView2/2/w/600/interlace/1/q/70" /></li>
</ul>

3. 调用 bxSlider:


$(document).ready(function(){
  $('.bxslider').bxSlider();
});

当然 bxSlider 还有许多设置参数,你可以根据你自己的项目需求进行配置,详细请查看 bxSlider 的 Options 页面

下载:bxSlider
演示:jQuery slider 插件: bxSlider

标签:

热门文章