响应式内容滑动插件jQuery.bxSlider
bxSlider特性
1.充分响应各种设备,适应各种屏幕;
2.支持多种滑动模式,水平、垂直以及淡入淡出效果;
3.支持图片、视频以及任意html内容;
4.支持触摸滑动;
5.支持Firefox,Chrome,Safari,iOS,Android,IE7+
官方网站:http://bxslider.com/
中文说明可参考:http://www.helloweba.com/view-blog-219.html
如何使用bxSlider
1、首先是加载jQuery库,以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider。
- <link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <script src="jquery.bxslider.min.js"></script>
2、准备滑动内容,我们创建一个ul.bxslider,然后在其子元素li中加入滑动内容,滑动内容可以是图片、视频以及任意html内容:
- <ul class="bxslider">
- <li><img src="data:images/s1.jpg" /></li>
- <li><img src="data:images/s2.jpg" /></li>
- <li><img src="data:images/s3.jpg" /></li>
- </ul>
3、调用bxSlider插件,当页面内容加载完时调用bxSlider。
- $(function(){
- $('.bxslider').bxSlider();
- });
这样,一个超酷的内容滑动效果就实现了,查看演示demo,将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。bxSlider提供了丰富的配置选项,可以设置不同参数满足各种客户需求,来看它的选项配置。
bxSlider选项设置
bxSlider提供了丰富的选项可配置,以下我们列出最主要也是最常用的选项设置。
参数 | 描述 | 默认值 |
mode | 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
speed | 内容切换速度,数字,ms | 500 |
startSlide | 初始滑动位置,数字 | 0 |
randomStart | 随机初始滑动位置 | true |
infiniteLoop | 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 | true |
easing | 切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 | null |
captions | 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 | false |
video | 支持视频,当设置为true时,需要jquery.fitvids.js支持 | false |
pager | 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 | true |
controls | 设置是否显示上一副和下一幅按钮 | true |
auto | 设置是否自动滑动 | false |
pause | 自动滑动时停留时间,数字,ms | 4000 |
autoHover | 当鼠标滑向滑动内容上时,是否暂停滑动 | false |
更多bxSlider的选项设置,请参照bxSlider官网:http://bxslider.com/options
响应式内容滑动插件jQuery.bxSlider的更多相关文章
- 响应式内容滑动插件bxSlider
bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...
- 20 个非常棒的jQuery内容滑动插件
Wow Slider WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- 响应式瀑布流插件Grid-A-Licious
Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- 响应式菜单栏: bootstrap + jQuery
bootstrap库能够很方便的实现PC和移动上的响应式操作. jQuery库大大的简化了脚本的开发: html: <html> <body> <div class='m ...
- javascript适合移动端的响应式瀑布流插件实例演示
在线预览 jQuery插件大全 实例代码 <div class="sucaihuo-container"> <div class="demo" ...
随机推荐
- css样式
这是CSS的定义经常用到的样式: body{ width:100%; background:#000; text-align:center;font:12px "宋体", Aria ...
- java抽象类
Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...
- 《将博客搬至CSDN》
http://www.cnblogs.com/duenyang 两个博客一起用,大家也可以去我CSDN博看查看.
- WinForm 中TreeView 控件的使用实例
新建一个窗体,在本窗体界面上需要以下几个按钮 (一个TreeView 一个 TextBox 三个Button 按钮) 后台代码如下: using System; using System.Co ...
- javascript 减少回流
减少回流(REFLOWS) 当浏览器重新渲染文档中的元素时需要 重新计算它们的位置和几何形状,我们称之为回流.回流会阻塞用户在浏览器中的操作,因此理解提升回流时间是非常有帮助的. 回流时间图表 你应该 ...
- WPF整理-使用逻辑资源
"Traditional application resources consist of binary chunks of data, typically representing thi ...
- Open Data Structure Templates
数据结构模板 Chen 2016/12/22 前言 本篇博客的模板,全部是我纯手打的,如果有发现错误,请在下方留言指正:).欢迎大家参考. 有一些地方还不是很完善,等过一阵子用C++实现和部分重构下. ...
- escape,encodeURI,encodeURIComponent的区别
escape是对字符串进行编码而另外两种是对URL. encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+'encodeURIComponent方法 ...
- CG_INLINE,inline 内联函数
内联函数,即在编译的时候将函数体替换函数调用,从而不需要将parameter,return address进行push/pop stack的操作,从而加速app的运行,然而,会增加二进制文件的大小. ...
- 提取本地环境中部署RDLC的DLL
要使用reportviewer来呈现报表,需要有三个dll Microsoft.ReportViewer.WinForms.DLL Microsoft.ReportViewer.WebForms.DL ...