Slider Revolution基於jQuery，它充分響應，支持移動設備，支持手機觸摸，鍵盤翻頁;它內置幻燈、視頻播放計時器，它擁有各種模式：自定義，自動響應，全屏;它有多種動畫效果、3d效果。
下面介紹使用步驟：
1，引入需要使用的文件如下：
|
1
2
3
4
|
<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>
|
2.在body部分定義主體html結構如下：
-
12345678910111213141516171819202122232425262728293031323334353637<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>
3。調用Slider Revolution：
123456789$(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：關閉。
對於每個
- 標簽可以設置各種效果：
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 動畫效果擴展
此外，如果要加上時間線作為一個定時器，可以在滑動內容的末尾加上以下代碼：
12<div class="tp-bannertimer"></div>