jQuery輪播圖飛入效果是一種常見的網站圖片展示形式。它能夠實現圖片的快速切換效果,讓用戶更加易于瀏覽網頁內容。下面我們來學習如何使用jQuery實現輪播圖飛入效果的代碼。
$(document).ready(function(){
// 設置變量
var prevImg = 0;
var currentImg = 1;
var nextImg = 2;
var time = 5000;
// 設置圖片飛入效果
function changeImg(){
$('img:eq('+nextImg+')').fadeIn('slow');
$('img:eq('+prevImg+')').fadeOut('slow');
$('img:eq('+currentImg+')').animate({
top: '-=50',
left: '-=100',
opacity: 0
}, 'slow');
$('img:eq('+nextImg+')').animate({
top: '+=50',
left: '+=100',
opacity: 1
}, 'slow');
// 更新變量
prevImg = currentImg;
currentImg = nextImg;
nextImg = (nextImg + 1)%$('img').length;
}
// 輪播圖
setInterval(changeImg, time);
});
在上面的代碼中,我們定義了變量prevImg, currentImg和nextImg,分別表示當前圖片的前一張圖片、當前圖片和下一張圖片。我們使用setInterval函數實現了輪播圖效果,將changeImg函數作為參數傳入該函數中。changeImg函數中使用了fadeIn、fadeOut和animate函數實現了圖片飛入的效果。通過不斷地更新prevImg、currentImg和nextImg變量,我們可以實現輪播圖的無限循環。