首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 15:56:38
原創
2534 人瀏覽過

這是一款非常強大的內容切換插件,它基於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-horizo​​ntal,slotslide-horizo​​ntal,slotfade-horizo​​ntal,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 動畫效果擴充

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

     
    <div class="tp-bannertimer"></div> 
    登入後複製

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

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!