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 web对话框与弹出窗口
Feb 22 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
Vue如何实现验证码输入交互
Dec 07 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
PHP Switch 语句之学习笔记
2013/09/21 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Google 地图控件集详解及实例代码
2016/08/06 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python获取mp3文件信息的方法
2015/06/15 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
高级Java程序员面试要点
2013/08/02 面试题
信息部岗位职责
2013/11/12 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL