快捷導(dǎo)航

jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫滑動(dòng)圖片切換效果

更新時(shí)間：2015年06月05日 08:55:10 投稿：hebedich

Slider Revolution插件是一款非常強(qiáng)大的插件了，我們可以利用它來(lái)制作出各種效果并且還支持移動(dòng)設(shè)備，支持手機(jī)觸摸，鍵盤翻頁(yè)；它內(nèi)置幻燈、視頻播放計(jì)時(shí)器等等效果，具體我們來(lái)看看。

這是一款非常強(qiáng)大的內(nèi)容切換插件，它基于jQuery，它充分響應(yīng)，支持移動(dòng)設(shè)備，支持手機(jī)觸摸，鍵盤翻頁(yè)；它內(nèi)置幻燈、視頻播放計(jì)時(shí)器，它擁有各種模式：自定義，自動(dòng)響應(yīng)，全屏；它有多種動(dòng)畫效果、3d效果...總之你想到的效果它都做到了，它的名字叫Slider Revolution。

HTML

Slider Revolution是一款基于jQuery的插件，使用它時(shí)需要先載入jQuery庫(kù)文件，以及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>

內(nèi)容切換的主體html結(jié)構(gòu)如下，由div.tp-banner包含多個(gè)<li>標(biāo)簽，<li>中放置切換的內(nèi)容，包括主要圖片、文字、按鈕信息。這些信息配上各自的data-屬性，是為了讓Slider Revolution識(shí)別。

<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調(diào)用

HTML結(jié)構(gòu)布置好后，就可以調(diào)用Slider Revolution插件了，貼上以上代碼后，打開(kāi)瀏覽器就可以看到切換效果了。

 
$(function() { 
 $('.tp-banner').revolution({ 
  delay:9000, 
  startwidth:1170, 
  startheight:500, 
  hideThumbs:10 
 }); 
});

選項(xiàng)設(shè)置與說(shuō)明

Slider Revolution提供了很多參數(shù)選項(xiàng)設(shè)置：
delay: 滑動(dòng)內(nèi)容停留時(shí)間。默認(rèn)9000毫秒
startheight: 滑動(dòng)內(nèi)容高度，默認(rèn)490像素。
startwidth: 滑動(dòng)內(nèi)容寬度，默認(rèn)890像素。
navigationType: 顯示翻頁(yè)圖標(biāo)，默認(rèn)“bullet”（圓點(diǎn)），如果設(shè)置為“none”則不顯示。。
navigationArrows: 顯示翻頁(yè)箭頭，默認(rèn)nexttobullets，即鼠標(biāo)滑向時(shí)顯示左右翻頁(yè)箭頭，如果設(shè)置為none則不顯示。
touchenabled: 是否允許觸摸滑動(dòng)，默認(rèn)on即允許，如果設(shè)置為off則不允許。
onHoverStop: 是否開(kāi)啟鼠標(biāo)滑向時(shí)暫停，on：開(kāi)啟，off：關(guān)閉。
fullWidth: 是否開(kāi)啟全屏展示圖片內(nèi)容，on：開(kāi)啟，off：關(guān)閉。

對(duì)于每個(gè)<li>標(biāo)簽可以設(shè)置各種效果：
data-transition: 內(nèi)容滑動(dòng)效果，可以設(shè)置以下值：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: 切換時(shí)被分成的方形塊數(shù)。
data-link: 圖片鏈接
data-delay: 設(shè)置當(dāng)前滑塊內(nèi)容的停留時(shí)間

對(duì)于每個(gè)li里面的元素，可以設(shè)置以下選項(xiàng)來(lái)實(shí)現(xiàn)各種效果。
動(dòng)畫樣式，class屬性: class屬性值代表不同的動(dòng)畫樣式：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: 當(dāng)前元素相對(duì)li的橫向位移
data-y : 當(dāng)前元素相對(duì)li的縱向位移
data-speed: 動(dòng)畫時(shí)間，毫秒
data-start after: 當(dāng)前元素等待幾秒后再顯示
data-easing: 緩沖動(dòng)畫，有easeOutBack...多種動(dòng)畫效果，可參照jQuery Easing 動(dòng)畫效果擴(kuò)展

此外，如果要加上時(shí)間線作為一個(gè)定時(shí)器，可以在滑動(dòng)內(nèi)容的末尾加上以下代碼：