一、什麼是jqDisplay
jqDisplay是一個jQuery插件，可以幫助我們輕鬆實現圖片漸變過渡效果，使網站頁面更加美觀，對於圖片展示效果提升很大。
引入jqDisplay的JS文件後，我們可以使用簡單的代碼就實現了圖片漸變過渡效果，不用太多CSS代碼就可以實現我們需要的效果。
二、如何使用jqDisplay
使用jqDisplay非常簡單，我們只需要引入jquery.js和jqDisplay.js兩個文件，在HTML中用class或id給需要實現圖片漸變過渡效果的區域進行標記，在js中寫入以下代碼即可：
$(function(){
$('.myGallery').jqDisplay({
width: 800, // 圖片寬度
height: 400, // 圖片高度
delayTime: 3000, // 每張圖片停留的時間
fadeTime: 1000, // 圖片過渡的時間
numButtons: true, // 是否顯示圖片序號
autoPlay: true, // 是否自動播放
effect: 'fade' // 過渡效果，除了默認的fade，還可以設置為slide和nonsupport
});
});
以上代碼表示我們以「myGallery」為class的區域將會實現圖片漸變過渡效果，具體的細節可以參照注釋的說明進行設置。
三、使用注意事項
雖然jqDisplay的使用足夠簡單，但是在使用中還有幾個注意事項需要我們留意：
1、區域大小問題
需要注意的是，在使用jqDisplay的時候，要保證插件所綁定的區域大小為指定的width和height屬性中設置的大小，否則圖片的漸變效果會不盡人意。
2、圖片尺寸問題
另外，在使用jqDisplay的過程中，要確保每個圖片的尺寸都一樣，否則頁面會出現問題，而且這個問題比第一個問題更嚴重，容易產生流布局導致錯亂甚至溢出。
3、不支持IE瀏覽器
最後，該插件不支持IE瀏覽器，在IE11以下版本（包括IE11）中，圖片就是普通的輪播，過渡效果不支持。
四、總結
總地來說，使用jqDisplay能夠讓網站頁面的圖片展示效果更加絢麗，使用的步驟也非常簡單，只要按照以上的步驟引入插件並按照注釋進行設置即可。但是在具體使用中仍然要注意一些細節，比如區域大小問題、圖片尺寸問題等等。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/270022.html
微信掃一掃 
支付寶掃一掃 