在網頁設計中，圖片的展示和滾動效果是非常常見的。HTML提供了簡單而實用的方式，可以很容易地實現圖片滾動效果。下面我們來看一下如何編寫一個基本的圖片滾動代碼。

<div id="slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>

首先我們創建一個id為“slider”的div容器，將需要滾動的圖片放在其中。每一個標簽包含需要滾動的圖片的路徑。

#slider {
width: 500px;
height: 300px;
overflow: hidden;
}
#slider img {
width: 500px;
height: 300px;
float: left;
}

接下來我們設置div容器的寬度和高度，并將其設置為隱藏（overflow:hidden）以隱藏圖片之外的部分。同時，我們也需要將每一個標簽的寬度和高度設置為與父容器相同，且都向左浮動。

$(document).ready(function(){
setInterval(function(){
$('#slider img:first').appendTo('#slider');
}, 3000);
})

最后我們編寫javascript代碼，實現循環滾動的效果。通過將第一個圖片添加到div的末尾，實現圖片的自動滾動。使用setInterval函數可以設置滾動時間間隔。

通過以上的代碼，我們已經成功地實現了一個簡單的圖片滾動效果。當然還有許多對滾動效果進行優化和改進的方法，讓我們的網頁更加出色。