jQuery遮罩輪播圖效果是一種常見的網頁特效。它可以通過交替顯示不同圖片和使用透明遮罩層來創造出一種獨特的視覺效果。下面是一個簡單的實現方式：

<!-- HTML結構 -->
<div class="banner">
<ul class="img-list">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
<div class="mask"></div>
</div>
<!-- CSS樣式 -->
.banner {
position: relative;
height: 300px;
}
.img-list {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.img-list li img {
display: block;
width: 100%;
height: 100%;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
z-index: 2;
}
<!-- JavaScript代碼 -->
$(document).ready(function() {
// 初始狀態
var current = 0;
$('.img-list li').eq(current).fadeIn().siblings().fadeOut();
setInterval(function() {
current++;
if (current == $('.img-list li').length) {
current = 0;
}
// 動畫效果
$('.img-list li').eq(current).fadeIn().siblings().fadeOut();
}, 2000);
});

以上代碼中，HTML結構包含一個主容器（.banner）和一個圖片列表（.img-list），其中包含多個標簽。主容器中還有一個半透明遮罩層（.mask）用于創造遮罩效果。CSS樣式設置了主容器和圖片列表的位置和大小，并給遮罩層設置了背景色和透明度。JavaScript代碼通過設置計時器來切換圖片，同時使用fadeIn()和fadeOut()方法來創造漸進漸出的動畫效果。