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 相关文章推荐
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
javascript回到顶部特效
Jul 30 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
教师岗位职责
2013/11/17 职场文书
房地产项目建议书
2014/03/12 职场文书
2014年新生军训方案
2014/05/01 职场文书
红色旅游心得体会
2014/09/03 职场文书
技术入股合作协议书
2014/10/07 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL