JQuery是一款經(jīng)典的JavaScript庫工具，為了制作出更美觀、更動感的Banner圖，我們可以利用JQuery庫中的動畫效果，使Banner圖更加生動有趣。Banner圖是一種在神奇的網(wǎng)絡(luò)時代中廣泛使用的網(wǎng)站設(shè)計元素，它能夠吸引用戶的注意，起到引導(dǎo)用戶進入網(wǎng)站的作用。

$(function(){
var num = $('.banner li').length;//獲取廣告圖的數(shù)目
var adTimer = null;
var index = 0;
$('.banner li').eq(0).show();
//廣告切換函數(shù)
function banner(index){
$('.banner li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
$('.banner .banner-index li').eq(index).addClass('active').siblings().removeClass('active');
}
//自動播放函數(shù)
function autoSlide(){
adTimer = setInterval(function(){
index++;
if(index == num){
index = 0;
}
banner(index);
},3000);
}
//鼠標移入 banner 輪播停止
$('.banner').mouseover(function(){
clearInterval(adTimer);
});
//鼠標移出 banner 輪播繼續(xù)
$('.banner').mouseout(function(){
autoSlide();
});
//手動切換廣告
$('.banner .banner-index li').click(function(){
index = $(this).index();
banner(index);
});
autoSlide();//開始輪播
});

在上述代碼中，我們首先獲取了Banner圖的數(shù)量，以及廣告圖的序號（index），并通過封裝函數(shù)的方式，來實現(xiàn)廣告圖片的漸隱漸現(xiàn)效果。同時，我們還實現(xiàn)了手動切換廣告的功能，即鼠標點擊Banner下方的序號，可以切換到對應(yīng)的廣告圖。最后，使用setInterval方法實現(xiàn)自動輪播功能，達到更好的效果。

以上是一個簡單的JQuery banner制作過程，希望大家可以借此了解和掌握JQuery動畫效果的使用方法，并嘗試制作出更加精美實用的Banner圖。