HTML5中的圖片輪播功能在網頁設計中非常實用，可以讓網頁內容更加豐富多彩，吸引用戶的關注。下面是一段HTML5中圖片輪播的代碼示例：

<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img_1.jpg" alt="Image 1">
</div>
<div class="item">
<img src="img_2.jpg" alt="Image 2">
</div>
<div class="item">
<img src="img_3.jpg" alt="Image 3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

以上代碼中，使用了輪播組件“carousel”的相關設置。 首先，定義了三個圖片的輪播項，每個項內部通過標簽“<img>”指定了需要顯示的圖片。 其次，定義了輪播組件的箭頭按鈕，通過引用“<a>”標簽和“glyphicon”字體圖標來實現。 最后，設置了組件的輪播效果，即自動輪播和鼠標懸停輪播暫停等。 通過以上代碼示例，可以通過HTML5的圖片輪播功能實現網頁中圖片的自動播放，讓網頁更加生動有趣，吸引用戶注意力。