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> 

  以上所述就是本文的全部內容了，希望大家能夠喜歡。