这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动画效果、3d效果
淘建站为您提供更多_图片代码_图片轮播_滑动_焦点图，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 100 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
HTML
首先我们引入jQuerh库和Slider Revolution插件
<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>我们放置了两个
<ul>
<!-- SLIDE -->
<li data-transition="slideleft" data-slotamount="14">
<!-- MAIN IMAGE -->
<img src="images/bg1.jpg" alt="Rev Full">
<div class="caption sfb" data-x="693" data-y="75" data-speed="700" data-start="0"data-easing="easeOutBack">
<img src="images/mobile.png" alt=""/>
</div>
<div class="tp-caption slider-text-title sft str" data-x="20" data-y="150" data-speed="300" data-start="800" data-easing="easeOutCubic" data-end="6000" data-endspeed="500" style="font-size:24px">标题1</div>
<div class="tp-caption slider-text-description sft str" data-x="20" data-y="200" data-start="1000" data-easing="easeOutBack" data-end="4500" data-endspeed="500">
Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,<br />
lorem quis bibendum auctor, nisi elit consequat ipsum, nec <br />
sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate
</div>
<div class="tp-caption slider-text-description sft str" data-x="20" data-y="280" data-start="1500" data-easing="easeOutBack" data-end="5000" data-endspeed="500">
<a href="#" class="button btn-flat">More Info</a>
</div>
</li>
<!-- SLIDE -->
<li data-transition="boxslide" data-slotamount="7" data-masterspeed="300" >
<!-- MAIN IMAGE -->
<img src="images/bg2.jpg" alt="darkblurbg" data-fullwidthcentering="on">
<!-- LAYERS -->
<div class="tp-caption lft stb stl"
data-x="650"
data-y="93"
data-speed="500"
data-start="500"
data-easing="easeOutExpo" data-end="6000" data-endspeed="500"><img src="images/imac.png" alt="Image 1"></div>
<div class="tp-caption lfb stb stl"
data-x="616"
data-y="194"
data-speed="500"
data-start="700"
data-easing="easeOutExpo" data-end="6000" data-endspeed="500"><img src="images/ipad.png" alt="Image 1"></div>
<div class="tp-caption lfr stb stl"
data-x="751"
data-y="290"
data-speed="1000"
data-start="1000"
data-easing="easeOutExpo" data-end="6000" data-endspeed="500"><img src="images/iphone.png" alt="Image 1"></div>
<div class="tp-caption slider-text-title sft str"
data-x="20"
data-y="150"
data-speed="300"
data-start="800"
data-easing="easeOutCubic" data-end="6000" data-endspeed="500" style="font-size:24px">标题2</div>
<div class="tp-caption slider-text-description sft str" data-x="20" data-y="200" data-start="1000" data-easing="easeOutBack" data-end="4500" data-endspeed="500">
Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,<br />
lorem quis bibendum auctor, nisi elit consequat ipsum, nec <br />
sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate
</div>
<div class="tp-caption slider-text-description sft str" data-x="20" data-y="280" data-start="1500" data-easing="easeOutBack" data-end="5000" data-endspeed="500">
<a href="#" class="button btn-flat">More Info</a>
</div>
</li>
</ul>jQuery
调用Slider Revolution非常简单：
$(function() {
$('.tp-banner').revolution({
delay:8500, //滑动内容停留时间
startwidth:1020, //滑动内容宽度
startheight:400,
hideThumbs:8
});
});提示：若startheight设置为500，那么.tp-banner-container也要设置相同高度，且要overflow:hidden。即让超过500px的图片给遮住。
| 参数 | 描述 | 默认值 |
| navigationType | 显示翻页图标，如果设置为“none”则不显示。 | “bullet”（圆点） |
| navigationArrows | 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。 | nexttobullets |
| touchenabled | 是否允许触摸滑动，如果设置为off则不允许。 | on |
| onHoverStop | 是否开启鼠标滑向时暂停，on：开启，off：关闭。 | on |
| fullWidth | 是否开启全屏展示图片内容，on：开启，off：关闭。 | on |
每个 |
||
| 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... | - |
