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 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
深入理解javascript变量声明
Nov 20 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
老生常谈js中的MVC
Jul 25 Javascript
学习Vue组件实例
Apr 28 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP的PDO操作简单示例
2016/03/30 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
php图片裁剪函数
2018/10/31 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
PyQt5实现简易计算器
2020/05/30 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
会计学自我鉴定
2014/02/06 职场文书
《童年》教学反思
2014/02/18 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
班级读书活动总结
2014/06/30 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
大学生求职意向书
2015/05/11 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript