jQuery插件Slider Revolution实现响应动画滑动图片切换效果


Posted in Javascript onJune 05, 2015

这是一款非常强大的内容切换插件,它基于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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery插件制作简单示例说明
Feb 03 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
vue移动端路由切换实例分析
May 14 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
javascript实现删除前弹出确认框
Jun 04 #Javascript
jquery插件validation实现验证身份证号等
Jun 04 #Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 #Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 #Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 #Javascript
深入理解JavaScript中的对象
Jun 04 #Javascript
详解JavaScript中void语句的使用
Jun 04 #Javascript
You might like
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
优秀村官事迹材料
2014/01/10 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
2015年路政工作总结
2015/05/22 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
Python使用scapy模块发包收包
2021/05/07 Python