隨著前端技術的不斷發展，網站的視效越來越多樣化和豐富化。其中，輪播圖是一個非常常見的效果，而jQuery輪播縮略圖變大則是其中的一種變化形式。

$(function(){
var imgWidth = $(".imgGroup img").eq(0).width();
var imgHeight = $(".imgGroup img").eq(0).height();
$(".imgGroup").css({"width": imgWidth+"px", "height": imgHeight + "px"});
// 鼠標移入縮略圖
$(".thumbnail li").mouseover(function(){
var index = $(this).index(); // 獲取當前縮略圖的索引
var imgSrc = $(".imgGroup img").eq(index).attr("src"); // 獲取對應的圖片地址
$(".imgGroup img").hide().removeAttr("style").attr("src", imgSrc).fadeIn(); // 更換圖片并展示
$(this).addClass("active").siblings().removeClass("active"); // 給當前縮略圖添加激活樣式
zoomIn(); // 圖片放大
});
// 圖片恢復原始大小
$(".imgGroup").mouseleave(function(){
$(".imgGroup img").removeAttr("style").fadeOut(function(){
$(this).attr("src", $(".imgGroup img").eq(0).attr("src")).fadeIn(); // 恢復第一張圖片并展示
$(".thumbnail li").eq(0).addClass("active").siblings().removeClass("active"); // 縮略圖激活第一張
});
});
function zoomIn() {
$(".imgGroup").stop().animate({"width": imgWidth*1.2 + "px", "height": imgHeight*1.2 + "px"});
}
});

通過上述代碼，當鼠標移入縮略圖時，會切換對應的圖片，并將該圖片放大1.2倍展示。而移出圖片區域時，則會恢復原始大小，同時縮略圖也會激活第一張。

這種jQuery輪播縮略圖變大的效果不僅能夠提升網站的視覺效果，也可以讓用戶更加方便地瀏覽圖片，更好地展示網站的品牌形象和產品特色。