HTML中帶有圖片輪播切換效果的代碼如下：

<!-- 定義圖片容器 -->
<div id="slider">
<!-- 定義每一張圖片 -->
<img class="slide" src="img1.jpg">
<img class="slide" src="img2.jpg">
<img class="slide" src="img3.jpg">
</div>
<script>
// 定義輪播的參數
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);
// 顯示下一張圖片
function nextSlide() {
var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
currentSlide++;
if (currentSlide > slides.length) {currentSlide = 1}
slides[currentSlide-1].style.display = "block";
}
</script>

在以上代碼中，我們定義了一個id為slider的div元素作為圖片容器，并在其中定義了每一張圖片的img元素。接著，我們使用JavaScript定義了輪播的參數和效果。具體來說，我們定義了currentSlide表示當前顯示的圖片編號，slideInterval表示切換圖片的時間間隔，以及nextSlide函數用于切換圖片并定時調用。

在nextSlide函數中，我們首先獲取所有class為slide的元素（即每一張圖片），并將它們的display屬性都設為none以隱藏所有圖片。接著，我們將currentSlide遞增，并判斷當前是否已經到達最后一張圖片。如果是，我們將currentSlide設為1以重新從第一張圖片開始。最后，我們將當前應該顯示的圖片的display屬性設為block以顯示該圖片。