圖片滾動效果是很多網站都會應用的一種效果，在HTML中設置圖片滾動效果也是很簡單的。下面我們就來看看一下該怎么做。
<html>
<head>
<title>圖片滾動效果</title>
<style>
.scroll {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}
.scroll img {
display: inline-block;
height: 200px;
margin-right: 10px;
vertical-align: top;
width: 200px;
}
</style>
</head>
<body>
<div class="scroll">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
</body>
</html>首先，在HTML中，我們需要用一個div元素來包含所有需要滾動的圖片。設置該div元素的class屬性為"scroll"。接下來，我們需要在CSS中設置該class的樣式。
.scroll {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}在樣式中，我們首先設置white-space屬性為nowrap，這樣可以讓內部的圖片不會換行。接下來，我們設置overflow-x屬性為auto，這樣可以讓水平方向出現滾動條。然后，我們設置overflow-y屬性為hidden，這樣可以避免出現垂直方向的滾動條。最后，我們設置寬度為100%。
.scroll img {
display: inline-block;
height: 200px;
margin-right: 10px;
vertical-align: top;
width: 200px;
}接下來我們要設置圖片的樣式。我們首先設置display屬性為inline-block，這樣可以讓圖片排成一行。然后，我們設置圖片的height和width屬性為200px，這樣可以保證圖片的大小相同。接著，我們設置圖片的margin-right屬性為10px，這樣可以讓圖片之間有一定的距離。最后，我們設置圖片的vertical-align屬性為top，這樣可以讓圖片的頂部在同一水平線上。
最后，HTML代碼就完成了。你可以在其中添加更多的圖片，或者根據你的需要調整圖片的大小和距離。當你在瀏覽器中打開該頁面時，你就可以看到圖片滾動的效果了！