jQuery插件Slider Revolution实现响应动画滑动图片切换效果
作者:bea
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution。 HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。 <scri
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution。
HTML
Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
内容切换的主体html结构如下,由div.tp-banner包含多个<li>标签,<li>中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让Slider Revolution识别。
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
data-x="85"
data-y="224"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut">My Caption
</div>
...
</li>
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
data-x="85"
data-y="224"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut">My Caption
</div>
...
</li>
....
</ul>
</div>
</div>
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:关闭。
对于每个<li>标签可以设置各种效果: 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 Easing 动画效果扩展
此外,如果要加上时间线作为一个定时器,可以在滑动内容的末尾加上以下代码:
<div class="tp-bannertimer"></div>
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
HTML
Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件。
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
内容切换的主体html结构如下,由div.tp-banner包含多个<li>标签,<li>中放置切换的内容,包括主要图片、文字、按钮信息。这些信息配上各自的data-属性,是为了让Slider Revolution识别。
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
data-x="85"
data-y="224"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut">My Caption
</div>
...
</li>
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
data-x="85"
data-y="224"
data-speed="500"
data-start="1200"
data-easing="Power4.easeOut">My Caption
</div>
...
</li>
....
</ul>
</div>
</div>
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:关闭。
对于每个<li>标签可以设置各种效果: 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 Easing 动画效果扩展
此外,如果要加上时间线作为一个定时器,可以在滑动内容的末尾加上以下代码:
<div class="tp-bannertimer"></div>
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 简介JavaScript中valueOf()方法的使用1
- jQuery插件jRumble实现网页元素抖动
- js+html5获取用户地理位置信息并在Google地图上显示的方法
- jquery插件NProgress.js制作网页加载进度条
- JavaScript中toString()方法的使用详解
- javascript实现倒计时并弹窗提示特效
- jQuery插件EnPlaceholder实现输入框提示文字
- 基于jQuery+JSON的省市二三级联动效果
- 简介JavaScript中Boolean.toSource()方法的使用
- 判断访客终端类型集锦
- JavaScript中constructor()方法的使用简介
- JavaScript中的原型prototype属性使用详解
- HTML5使用DeviceOrientation实现摇一摇功能
- 简介JavaScript中POSITIVE_INFINITY值的使用
- JavaScript中Number.NEGATIVE_INFINITY值的使用详解
- jQuery+HTML5实现手机摇一摇换衣特效
- 在JavaScript中使用NaN值的方法
- jQuery实现表格行上下移动和置顶效果
- jQuery实现弹出窗口中切换登录与注册表单