今天我們將學習一種非常有用的 CSS 技巧，它可以讓你的網站的圖片能夠被點擊并進行滾動操作。現在，我們來看看如何在 CSS 中實現它。 首先，我們需要創建一個 div 容器來包含我們的圖片。在這個 div 中，我們將設置 overflow 屬性為 hidden，這樣可以隱藏圖片在容器之外的部分。 然后，我們需要創建一個 ul 列表，其中包含我們的圖片，每張圖片都為一個 li 元素。我們將設置每個 li 的 display 屬性為 inline-block，這樣可以使圖片在同一行顯示。 接下來，我們要為我們的圖片添加一個 hover 事件。當鼠標移上圖片時，我們將設置圖片的 transform 屬性和 transition 屬性，這樣可以讓圖片進行滾動操作。 最后，我們將使用 JavaScript 來為我們的圖片添加點擊事件。當點擊圖片時，我們將使用 transform 屬性來讓圖片移動到容器的正確位置。 下面是我們的 CSS 代碼：

.container {
width: 500px;
height: 300px;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
width: 500px;
height: 300px;
position: relative;
}
li img {
width: 100%;
height: 100%;
object-fit: cover;
}
li:hover {
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}
li.active {
position: absolute;
top: 0;
left: 0;
transform: translateX(0%);
transition: all 0.5s ease-in-out;
}

下面是我們的 JavaScript 代碼：

var images = document.querySelectorAll('li');
for (var i = 0; i< images.length; i++) {
images[i].addEventListener('click', function(e) {
e.preventDefault();
var active = document.querySelector('.active');
if (active !== null) {
active.classList.remove('active');
}
this.classList.add('active');
});
}

現在你已經掌握了如何通過 CSS 和 JavaScript 來實現圖片點擊滾動效果。嘗試在你的網站中添加這個非常酷的功能，讓你的網站更加動態和吸引人。