HTML5中的輪播效果是非常實用的功能，可以讓頁面中的圖片或者信息在一段時間內自動輪播，為用戶提供更好的瀏覽體驗。以下是一段HTML5輪播效果的代碼示例：

首先，需要在HTML5中使用slider元素。這個元素是HTML5新增加的元素，可以方便地實現輪播效果。同時，需要設置data-屬性，來設置輪播效果的各項參數。

<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">

上面的代碼中，data-effect屬性設置輪播效果的動畫類型，這里設置的是淡入淡出（fade）；data-speed屬性設置動畫速度，這里設置了1000ms；data-autoplay屬性設置是否自動播放，這里為true，表示開啟自動播放；data-interval屬性設置播放間隔，這里為3000ms，也就是3秒。

接下來，需要在CSS文件中設置Slider的樣式，包括寬度、高度、背景顏色等。同時還需要設置Slide的樣式，包括寬度、高度、輪播效果等。

slider {
width: 100%;
height: 400px;
background-color: #eee;
}
slide {
width: 100%;
height: 400px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
slide.current {
opacity: 1;
}

在JavaScript中，需要實現Slider的自動輪播功能，代碼如下：

var slides = document.querySelectorAll('#slider slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide current';
}

上面的代碼通過設置定時器setInterval()來實現自動輪播功能，其中nextSlide()函數用于設置Slider下一張圖片的樣式。

利用HTML5、CSS和JavaScript實現輪播效果，可以為頁面增加動態效果，吸引用戶的注意力。代碼簡單易懂，可隨意修改，實現個性化的輪播效果。