萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery插件Slider Revolution實現響應動畫滑動圖片切換效果

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

   Slider Revolution插件是一款非常強大的插件了,我們可以利用它來制作出各種效果並且還支持移動設備,支持手機觸摸,鍵盤翻頁;它內置幻燈、視頻播放計時器等等效果,具體我們來看看。

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

  HTML

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

  ?

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>

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

  • 標簽,
  • 中放置切換的內容,包括主要圖片、文字、按鈕信息。這些信息配上各自的data-屬性,是為了讓Slider Revolution識別。

     

      ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <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插件了,貼上以上代碼後,打開浏覽器就可以看到切換效果了。

      ?

    1 2 3 4 5 6 7 8 9   $(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 動畫效果擴展

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

      ?

    1 2   <div class="tp-bannertimer"></div>

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

copyright © 萬盛學電腦網 all rights reserved