這是一款非常強大的內容切換插件,它基於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包含多個
<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:關閉。
對於每個
對於每個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>
以上所述就是本文的全部內容了,希望大家能夠喜歡。