响应式 jQuery Slider 插件: bxSlider
来源:互联网 发布:法律援助 知乎 编辑:程序博客网 时间:2024/05/17 00:06
bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。
bxSlider 详细功能
- 完全响应式:支持所有设备。
- 支持水平,垂直和淡入淡出等模式。
- 支持图片,视频和 HTML 内容等幻灯片。
- 内置支持触摸和滑动等高级操作。
- 使用 CSS transitions 来实现幻灯片动画(原生硬件加速)。
- 完整的回调 API 和接口。
- 插件体积非常小,但是包含完整的主题,非常容易集成。
- 支持 Firefox, Chrome, Safari, iOS, Android, IE7+ 等几乎所有的浏览器。
- 非常详细的功能配置选项。
使用 bxSlider
在介绍 bxSlider 使用之前,先看下 bxSlider 演示(RSS 用户需要返回原网站查看):
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 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 还有许多设置参数,你可以根据你自己的项目需求进行配置,详细请查看 bxSlider 的 Options 页面。
下载:bxSlider。
演示:jQuery slider 插件: bxSlider
作者:Denis
© 我爱水煮鱼,转载请留下原文链接。
0 0
- 响应式 jQuery Slider 插件: bxSlider
- 响应式内容滑动插件bxSlider
- 响应式内容滑动插件bxSlider
- 1、jQuery插件之bxSlider幻灯片插件
- 一个强大专业的响应式jQuery幻灯效果插件:Royal Slider
- JQuery Slider 插件
- Coin Slider jQuery插件详解
- jQuery幻灯插件:Nivo Slider
- 滑动插件bxSlider-demo
- bxSlider图片滚动插件使用。
- 前端内容滑动插件bxSlider
- jquery插件系列之 - Slider滑块
- jquery插件nivo-slider实现幻灯效果
- Revolution Responsive jQuery Slider滑动幻灯片插件
- jQuery幻灯片插件Vmc Slider 实例
- jquery.nivo.slider轮播插件使用
- 基于jquery封装的一个slider插件
- jquery.nivo.slider.pack.js 插件
- 最大独立集问题
- Cocos2d-x与Android交互(c++与java互调),与IOS交互(c++与objective c混编)
- 【剑指offer】和为定值的两个数
- Javascript 对象方式实现命名参数调用(上):原理和手动实现
- 【存储管理】内核缓冲区的管理概述
- 响应式 jQuery Slider 插件: bxSlider
- DAY20--java中的反射机制常用知识点总结
- Wikioi 1297硬币 (二维完全背包)
- Bash的例子
- DAY21--java中的网络编程TCP/IP常用知识点总结
- poj 1973 erf
- oracle group by rollup,decode,grouping,nvl,nvl2,nullif,grouping_id,group_id,grouping sets,RATIO_TO
- 代码生成(Code Generation with Bake)
- Cadence 中A pin with name ‘GND' is duplicated on the part 报错的解决