jQuery插件Slider Revolution實現響應動畫滑動圖片切換效果

jQuery插件Slider Revolution實現響應動畫滑動圖片切換效果_jquery

WBOY

發布： 2016-05-16 15:56:38

原創

2585 人瀏覽過

這是一款非常強大的內容切換插件，它基於jQuery，它充分響應，支援行動設備，支援手機觸摸，鍵盤翻頁；它內建幻燈、視訊播放計時器，它擁有各種模式：自定義，自動回應，全螢幕；它有多種動畫效果、3d效果...總之你想到的效果它都做到了，它的名字叫Slider Revolution。

HTML

Slider Revolution是一款基於jQuery的插件，使用它時需要先載入jQuery庫文件，以及Slider Revolution依賴的css和js文件。

<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>

登入後複製

內容切換的主體html結構如下，由div.tp-banner包含多個

標籤，

中放置切換的內容，包括主要圖片、文字、按鈕資訊。這些資訊配上各自的data-屬性，是為了讓Slider Revolution辨識。

<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>

登入後複製

jQuery呼叫

HTML結構佈置好後，就可以呼叫Slider Revolution插件了，貼上以上程式碼後，開啟瀏覽器就可以看到切換效果了。

 
$(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，curtainslide-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 動畫效果擴充

此外，如果要加上時間軸作為一個定時器，可以在滑動內容的末端加上以下程式碼：