响应式内容滑动插件bxSlider
bxSlider特性
1.充分响应各种设备,适应各种屏幕;
2.支持多种滑动模式,水平、垂直以及淡入淡出效果;
3.支持图片、视频以及任意html内容;
4.支持触摸滑动;
5.支持Firefox,Chrome,Safari,iOS,Android,IE7+
如何使用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();
});
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
响应式内容滑动插件bxSlider的更多相关文章
- 响应式内容滑动插件jQuery.bxSlider
bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...
- 20 个非常棒的jQuery内容滑动插件
Wow Slider WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- [转]响应式表格jQuery插件 – Responsive tables
本文转自:http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html 这个Responsive tables jQuery插件依赖 ...
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...
- FooTable高级的响应式表格jQuery插件
FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...
- 响应式瀑布流插件Grid-A-Licious
Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...
随机推荐
- poj 1573 Robot Motion_模拟
又是被自己的方向搞混了 题意:走出去和遇到之前走过的就输出. #include <cstdlib> #include <iostream> #include<cstdio ...
- Android学习总结——Broadcast
一.利用BroadcastReceiever监听短信 AndroidManifest.xml <?xml version="1.0" encoding="utf-8 ...
- Yii2权威指南中文版及众包翻译平台
Yii2在今年4月份公布了beta版本号,预计下半年会推出正式版本号(可用于生产环境). Yii2使用了新的PHP语法特性(PHP5.4+)并集成了大量新的编程最佳实践, 如命名空间.响应式界面组件库 ...
- [AS3]as3用ByteArray来对SWF文件编码加密实例参考
[AS3]as3用ByteArray来对SWF文件编码加密实例参考,简单来说,就是将 swf 以 binary 的方式读入,并对 ByteArray 做些改变,再重新存成 swf 档.这个作业当然也可 ...
- [AS3]as3与JS的交互(AS3调用JS)实例说明
一,AS3 vs JavaScript (1)AS3调用JS 函数: ExternalInterface.(functionName:, arguments): //AS3 Code 属性: 同上,通 ...
- ZCTF-final-restaurant1
和线上赛的题目差别不大,但是需要自己去泄露堆的地址.除了线上赛的溢出之外,还多了一个Use After Free的洞.我写了两种利用方法. 线上赛writeup见:http://www.cnblogs ...
- 【MFC学习笔记-作业10-稍微难一点的画图】
设计如图所示的菜单,并编写相应用的消息处理函数.. 菜单1: 画图 画线 画矩形 画图 菜单2:颜色 红色(r) CTRL+F2; 绿色(g) CTRL +F1 蓝色(b) CTRL+F3: 问题:V ...
- 搭建MyBatis框架
一.开发环境 1.JDK 1.6.0_22 2.MyEclipse 10.7.1 3.Oracle_10g_10.2.0.4 注:各软件版本不是必须的,正常任意版本都行,文件较大就不附上下载地址了,推 ...
- .NET程序性能优化基本要领
想了解更多关于新的编译器的信息,可以访问 .NET Compiler Platform ("Roslyn") 基本要领 在对.NET 进行性能调优以及开发具有良好响应性的应 ...
- 《JavaScript 闯关记》之简介
简介 JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScript 解释器. 这使 ...