JQuery輪播圖是網站中常見的一種圖片展示方式。它可以通過JQuery的動畫效果，使圖片在頁面上自動切換顯示。以下將介紹其原理解析。

$(function(){
var index=0;
var len=$(".banner ul li").length;
var interval=setInterval(function(){
showImg(index);
index++;
if(index==len){
index=0;
}
},2000);
function showImg(index){
$(".banner ul li").eq(index).fadeIn(300).siblings().fadeOut(300);
$(".banner ol li").eq(index).addClass("active").siblings().removeClass("active");
}
$(".banner").hover(function(){
clearInterval(interval);
},function(){
interval=setInterval(function(){
showImg(index);
index++;
if(index==len){
index=0;
}
},2000);
});
$(".banner ol li").click(function(){
index=$(this).index();
showImg(index);
});
});

上述代碼中，首先需要定義index和len變量，其中index表示當前展示的圖片索引，len表示圖片總數。

使用setInterval()函數實現輪播，并調用showImg()函數展示對應圖片。showImg()函數中，通過fadeIn()和fadeOut()實現圖片的漸變效果。

在鼠標移動到輪播圖上時，清除setInterval()，防止輪播停止；當鼠標移出輪播圖時，重新設置setInterval()，繼續輪播。

點擊輪播點時，修改index變量的值，并調用showImg()函數展示對應圖片。

綜上所述，JQuery輪播圖實現原理主要是利用setInterval()函數和fadeIn()/fadeOut()方法，實現自動切換圖片的效果。