使用CSS可以輕松實現圖片的橫向移動效果，讓你的網站看起來更加生動有趣。這個效果可以用于展示產品的多視角，也可以用于頁面動態(tài)廣告宣傳。

/*CSS代碼實現*/
.image-container {
display: flex;
overflow-x: scroll; /*橫向滾動條*/
}
.image {
flex: 0 0 300px; /*設置圖片大小*/
margin-right: 10px; /*設置圖片之間的間距*/
}
/*JS代碼控制*/
let imageContainer = document.querySelector('.image-container');
let leftArrow = document.querySelector('.left-arrow');
let rightArrow = document.querySelector('.right-arrow');
let scrollAmount = 0;
let distance = 300;
rightArrow.addEventListener('click', function(event) {
event.preventDefault();
imageContainer.scrollTo({
top: 0,
left: (scrollAmount += distance),
behavior: 'smooth'
});
});
leftArrow.addEventListener('click', function(event) {
event.preventDefault();
imageContainer.scrollTo({
top: 0,
left: (scrollAmount -= distance),
behavior: 'smooth'
});
});

以上代碼首先使用CSS的flex布局實現了圖片橫向排列，同時利用overflow-x屬性將圖片超出容器的部分隱藏起來，并通過margin-right屬性設置圖片之間的間距。接著使用JS代碼監(jiān)聽左右箭頭的點擊事件，控制容器的滾動距離，來實現圖片的橫向移動效果。

總之，使用CSS和JS可以讓你輕松實現圖片橫向移動效果，讓網站更加生動有趣。