JQuery 3D輪播是一種動態呈現圖片和文字的方式,它是基于JQuery的3D動畫效果的輪播模塊。本文將為大家介紹如何使用JQuery 3D輪播。
首先,我們需要將JQuery 3D輪播的js和css文件引入到我們的HTML頁面中:
<script src="jquery.min.js"></script> <script src="jquery.gallery.js"></script> <link href="jquery.gallery.css" rel="stylesheet">
接著,我們需要創建一個輪播容器:
<div class="gallery"> <div class="gallery-slide"></div> <div class="gallery-controls"></div> </div>
在輪播容器中,我們需要創建一個 圖片外層div(class="gallery-slide")作為圖片展示區域,以及一個 圖片控制div(class="gallery-controls")用于設置輪播圖片的展現方式。
然后在js文件中,我們需要初始化輪播:
$(document).ready(function(){ $('.gallery').gallery({ items: [ {src: 'image1.jpg', title: '圖片1'}, {src: 'image2.jpg', title: '圖片2'}, {src: 'image3.jpg', title: '圖片3'}, {src: 'image4.jpg', title: '圖片4'} ], effect: 'iris', effectDuration: 800, speed: 4000, controls: true }); });
以上代碼中,我們傳遞了一個數組 objects 作為method的參數,數組中包含四個對象,每個對象分別包含了要展現圖片的路徑和標題。 接著我們還傳遞了一些其他參數,如效果效果,展現時間等等。
最后,我們就可以看到我們的JQuery 3D輪播效果啦~
在這個輪播組件中,我們支持多種效果展現,如blinds, bricks, wave, iris等等。 另外還可以設置圖片展現的速度,展現順序等等,非常的靈活,大家可以根據自己的需求進行設置。
上一篇css 內容居中左對齊
下一篇vue打包部署wamp