最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery Slider Revolution插件使用实例
时间：2015-05-31 编辑：简简单单 来源：一聚教程网
这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动画效果、3d效果...总之你想到的效果它都做到了，它的名字叫Slider Revolution。
HTML
Slider Revolution是一款基于jQuery的插件，使用它时需要先载入jQuery库文件，以及Slider Revolution依赖的css和js文件。
内容切换的主体html结构如下，由div.tp-banner包含多个
-
data-x="85"
data-y="224"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut">My Caption
...
data-x="85"
data-y="224"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut">My Caption
...
....
jQuery调用
HTML结构布置好后，就可以调用Slider Revolution插件了，贴上以上代码后，打开浏览器就可以看到切换效果了。
$(function() {
$('.tp-banner').revolution({
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10
});
});
选项设置与说明
Slider Revolution提供了很多参数选项设置：
delay: 滑动内容停留时间。默认9000毫秒
startheight: 滑动内容高度，默认490像素。
startwidth: 滑动内容宽度，默认890像素。
navigationType: 显示翻页图标，默认“bullet”（圆点），如果设置为“none”则不显示。。
navigationArrows: 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。
touchenabled: 是否允许触摸滑动，默认on即允许，如果设置为off则不允许。
onHoverStop: 是否开启鼠标滑向时暂停，on：开启，off：关闭。
fullWidth: 是否开启全屏展示图片内容，on：开启，off：关闭。
对于每个
data-transition: 内容滑动效果，可以设置以下值：boxslide，boxfade，slotzoom-horizontal，slotslide-horizontal，slotfade-horizontal，slotzoom-vertical，slotslide-vertical，slotfade-vertical，curtain-1，curtain-2，curtain-3，slideleft，slideright，slideup，slidedown，fade
data-slotamount: 切换时被分成的方形块数。
data-link: 图片链接
data-delay: 设置当前滑块内容的停留时间
对于每个li里面的元素，可以设置以下选项来实现各种效果。
动画样式，class属性: class属性值代表不同的动画样式：sft - Short from Top sfb - Short from Bottom，sfr - Short from Right，sfl - Short from Left，lft - Long from Top，lfb - Long from Bottom，lfr - Long from Right，lfl - Long from Left，fade - fading
data-x: 当前元素相对li的横向位移
data-y : 当前元素相对li的纵向位移
data-speed: 动画时间，毫秒
data-start after: 当前元素等待几秒后再显示
data-easing: 缓冲动画，有easeOutBack...多种动画效果，
此外，如果要加上时间线作为一个定时器，可以在滑动内容的末尾加上以下代码：
相关文章
- jQuery Validation 实例与详细说明 10-18
- jquery autocomplete插件实例google baidu相关内容 09-10
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31