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

/*CSS代碼實(shí)現(xiàn)*/
.image-container {
display: flex;
overflow-x: scroll; /*橫向滾動(dòng)條*/
}
.image {
flex: 0 0 300px; /*設(shè)置圖片大小*/
margin-right: 10px; /*設(shè)置圖片之間的間距*/
}
/*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布局實(shí)現(xiàn)了圖片橫向排列，同時(shí)利用overflow-x屬性將圖片超出容器的部分隱藏起來，并通過margin-right屬性設(shè)置圖片之間的間距。接著使用JS代碼監(jiān)聽左右箭頭的點(diǎn)擊事件，控制容器的滾動(dòng)距離，來實(shí)現(xiàn)圖片的橫向移動(dòng)效果。

總之，使用CSS和JS可以讓你輕松實(shí)現(xiàn)圖片橫向移動(dòng)效果，讓網(wǎng)站更加生動(dòng)有趣。