slider revolution实现幻灯片

Slider Revolution基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页;它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏;它有多种动画效果、3d效果。
下面介绍使用步骤：
1，引入需要使用的文件如下：

1. <script src="js/jquery.js"></script>
   
2. <link rel="stylesheet" href="css/style.css" media="screen" />
   
3. <script src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
   
4. <script src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
   

复制代码

2.在body部分定义主体html结构如下

1. <div class="tp-banner-container">
   
2. <div class="tp-banner" >
   
3. <ul>
   
4. <!-- SLIDE -->
   
5. <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
   
6. <!-- MAIN IMAGE -->
   
7. <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
   
8. <!-- LAYERS -->
   
9. <!-- LAYER NR. 1 -->
   
10. <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
    
11. data-x="85"
    
12. data-y="224"
    
13. data-speed="500"
    
14. data-start="1200"
    
15. data-easing="Power4.easeOut">My Caption
    
16. </div>
    
17. ...
    
18. </li>
    
19. <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
    
20. <!-- MAIN IMAGE -->
    
21. <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    
22. <!-- LAYERS -->
    
23. <!-- LAYER NR. 1 -->
    
24. <div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
    
25. data-x="85"
    
26. data-y="224"
    
27. data-speed="500"
    
28. data-start="1200"
    
29. data-easing="Power4.easeOut">My Caption
    
30. </div>
    
31. ...
    
32. </li>
    
33. ....
    
34. </ul>
    
35. </div>
    
36. </div>

复制代码

3。调用Slider Revolution：

1. $(function() {
   
2. $('.tp-banner').revolution({
   
3. delay:9000,
   
4. startwidth:1170,
   
5. startheight:500,
   
6. hideThumbs:10
   
7. });
   
8. });

复制代码

选项设置与说明

1. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">Slider Revolution提供了很多参数选项设置：</span>
   
2. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">delay: 滑动内容停留时间。默认9000毫秒</span>
   
3. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">startheight: 滑动内容高度，默认490像素。</span>
   
4. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">startwidth: 滑动内容宽度，默认890像素。</span>
   
5. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">navigationType: 显示翻页图标，默认“bullet”(圆点)，如果设置为“none”则不显示。。</span>
   
6. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">navigationArrows: 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。</span>
   
7. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">touchenabled: 是否允许触摸滑动，默认on即允许，如果设置为off则不允许。</span>
   
8. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">onHoverStop: 是否开启鼠标滑向时暂停，on：开启，off：关闭。</span>
   
9. <span style="font-family: inherit; line-height: 1.5; text-indent: 2em;">fullWidth: 是否开启全屏展示图片内容，on：开启，off：关闭。</span>
   
10. 
    

复制代码

对于每个标签可以设置各种效果：

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 动画效果扩展

此外，如果要加上时间线作为一个定时器，可以在滑动内容的末尾加上以下代码：

1. <div class="tp-bannertimer"></div>

复制代码