在網頁設計中，很多網頁都會使用Banner，用于展示網頁的主題和關鍵信息，增強用戶對網頁的視覺體驗。而Banner 的滑動效果更能吸引用戶的注意力，增強網頁的互動性。在本文中，我們將介紹如何使用HTML代碼創建Banner 滑動效果。

首先，我們需要使用HTML代碼創建Banner圖片。

<div class="banner">
<img src="banner1.jpg" alt="Banner1">
<img src="banner2.jpg" alt="Banner2">
<img src="banner3.jpg" alt="Banner3">
</div>

在上述代碼中，我們使用了div標簽來定義Banner的位置，并在其中使用了img標簽，用于顯示Banner 圖片。為了實現Banner的滑動效果，我們需要使用CSS代碼和JavaScript代碼。

下面是CSS代碼：

.banner{
width: 100%;
position: relative;
overflow: hidden;
}
.banner img{
width: 100%;
height: auto;
position: absolute;
top: 0;
}

在上述代碼中，我們定義了Banner容器div的寬度為100%，并且設置了其定位屬性為relative，以便下一步實現對Banner圖片的絕對定位。同時，我們對banner img進行設置，使其在Banner容器中絕對定位，并設置其寬度為100%。

下面是JavaScript代碼：

var index = 0;
var timer = setInterval(function() {
index++;
if(index >2) {
index = 0;
}
document.querySelector('.banner').style.left = -index * 100 + '%';
}, 3000);

在上述代碼中，我們定義了一個index 來記錄Banner圖片的索引值，并使用setInterval函數每3秒自動更新索引值，以實現Banner的滑動效果。在每次更新時，我們使用querySelector函數來獲取Banner容器div標簽，并使用style屬性設置其左偏移量，實現滑動效果。

通過以上CSS和JavaScript代碼的實現，我們可以輕松創建Banner滑動效果。當然，在實際應用中，我們還可以根據需求進行相應的調整，例如增加動畫效果或控制Banner滑動的速度等。