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

2018-12-31

編程之家

https://www.jb51.cc

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

HTML

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

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

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

SEOut">My Caption

...

SEOut">My Caption

...

....

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，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...多種動畫效果，可參照動畫效果擴展

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。