在網頁設計中，圖片點擊滾動效果經常被用來增強頁面的視覺效果，提高用戶體驗。下面是一段簡單的HTML代碼，可以實現圖片點擊滾動的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片點擊滾動</title>
<style>
/* 定義圖片樣式 */
.scroll-images {
width: 300px;
height: 200px;
overflow: hidden;
text-align: center;
margin: 50px auto;
}
.scroll-images img {
width: 100%;
vertical-align: middle;
}
/* 定義按鈕樣式 */
.scroll-btn {
display: inline-block;
width: 24px;
height: 24px;
background: #f00;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="scroll-images">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>
<div class="scroll-btn" onclick="prevImage()"></div>
<div class="scroll-btn" onclick="nextImage()"></div>
<script>
// 獲取圖片數量
var imgLen = document.querySelectorAll('.scroll-images img').length;
// 定義當前圖片索引
var index = 0;
// 上一張圖片
function prevImage() {
index--;
if (index < 0) {
index = imgLen - 1;
}
changeImage();
}
// 下一張圖片
function nextImage() {
index++;
if (index >= imgLen) {
index = 0;
}
changeImage();
}
// 切換圖片
function changeImage() {
var scrollImages = document.querySelector('.scroll-images');
var imgWidth = scrollImages.offsetWidth;
var moveLeft = -index * imgWidth;
scrollImages.style.transform = 'translate(' + moveLeft + 'px)';
}
</script>
</body>
</html>以上代碼中，我們首先定義了兩個樣式類，分別用來定義圖片和按鈕的樣式。接著使用HTML的<img>標記來插入四張圖片到頁面中，并將它們放到一個帶有overflow:hidden;樣式的DIV中。之后我們在頁面的底部加入兩個按鈕，以觸發JS代碼切換圖片。
在JS代碼中，我們首先使用document.querySelector()方法獲取了圖片容器和按鈕。然后定義了一個變量index，用來表示當前顯示的圖片索引。接著編寫了兩個函數prevImage()和nextImage()，用來切換圖片。在這里我們使用了transform屬性來讓圖片容器移動到當前索引的圖片位置。最后我們將三個函數寫入了<script>標簽中，并使用onclick事件綁定到按鈕上。
最后，這段代碼就可以在瀏覽器中運行，實現圖片點擊滾動的效果。當用戶點擊左側或右側按鈕時，頁面中的圖片會順利地向左或向右滾動，視覺效果非常不錯。