jQuery插件Slider Revolution实现响应动画滑动图片切换效果

Slider Revolution插件是一款非常强大的插件了，我们可以利用它来制作出各种效果并且还支持移动设备，支持手机触摸，键盘翻页;它内置幻灯、视频播放计时器等等效果，具体我们来看看。

这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页;它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏;它有多种动画效果、3d效果...总之你想到的效果它都做到了，它的名字叫Slider Revolution。

HTML

Slider Revolution是一款基于jQuery的插件，使用它时需要先载入jQuery库文件，以及Slider Revolution依赖的css和js文件。

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>  

内容切换的主体html结构如下，由div.tp-banner包含多个

• 标签，
• 中放置切换的内容，包括主要图片、文字、按钮信息。这些信息配上各自的data-属性，是为了让Slider Revolution识别。

   

   

   

  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.  
  19. </li>  
  20. <li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >  
  21. <!-- MAIN IMAGE --> 
  22. <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">  
  23. <!-- LAYERS --> 
  24. <!-- LAYER NR. 1 --> 
  25. <div class="tp-caption lightgrey_divider skewfromrightshort fadeout" 
  26. data-x="85" 
  27. data-y="224" 
  28. data-speed="500" 
  29. data-start="1200" 
  30. data-easing="Power4.easeOut">My Caption  
  31. </div>  
  32. ...  
  33. </li>  
  34. ....  
  35. </ul>  
  36. </div>  
  37. </div>  

  jQuery调用

  HTML结构布置好后，就可以调用Slider Revolution插件了，贴上以上代码后，打开浏览器就可以看到切换效果了。

   

   

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

  选项设置与说明

  Slider Revolution提供了很多参数选项设置：

  delay: 滑动内容停留时间。默认9000毫秒

  startheight: 滑动内容高度，默认490像素。

  startwidth: 滑动内容宽度，默认890像素。

  navigationType: 显示翻页图标，默认“bullet”(圆点)，如果设置为“none”则不显示。。

  navigationArrows: 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。

  touchenabled: 是否允许触摸滑动，默认on即允许，如果设置为off则不允许。

  onHoverStop: 是否开启鼠标滑向时暂停，on：开启，off：关闭。

  fullWidth: 是否开启全屏展示图片内容，on：开启，off：关闭。

  对于每个

• 标签可以设置各种效果：

   

  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> 

  以上所述就是本文的全部内容了，希望大家能够喜欢。