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源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
vue首次渲染全过程
Apr 21 Vue.js
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
php5 mysql分页实例代码
2008/04/10 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
分享五个有用的jquery小技巧
2015/10/08 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
小白谈谈对JS原型链的理解
2016/05/03 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
用 Python 制作地球仪的方法
2020/04/24 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
总经理助理岗位职责
2013/11/08 职场文书
教师实习自我鉴定
2013/12/11 职场文书
30年同学聚会感言
2014/01/30 职场文书
保护环境建议书100字
2014/05/13 职场文书
食品安全处置方案
2014/06/14 职场文书
地理科学专业自荐信
2014/09/01 职场文书
讲党性心得体会
2014/09/03 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
Golang流模式之grpc的四种数据流
2022/04/13 Golang
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技