HTML CSS 圖片左右滾動代碼怎么寫 現在，在很多網站中，我們注意到有些網站上的圖片是左右滾動的，就像幻燈片一樣。你是否好奇這個效果是如何實現的呢？其實，這主要是通過 HTML CSS 圖片左右滾動代碼實現的。下面，我們就結合實例來介紹如何實現這個效果。 HTML 代碼 首先，讓我們來看一下 HTML 代碼：

<div class="scroll-images">
<img src="img1.jpg" alt="圖片1">
<img src="img2.jpg" alt="圖片2">
<img src="img3.jpg" alt="圖片3">
<img src="img4.jpg" alt="圖片4">
<img src="img5.jpg" alt="圖片5">
<img src="img6.jpg" alt="圖片6">
<img src="img7.jpg" alt="圖片7">
<img src="img8.jpg" alt="圖片8">
<img src="img9.jpg" alt="圖片9">
</div>

在這個 HTML 代碼中，我們給許多圖片添加了一個 "scroll-images" 類名。因此，我們可以通過 CSS 代碼對這些類名進行樣式設置。 CSS 代碼 現在，我們來看看 CSS 代碼：

.scroll-images {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.scroll-images img {
display: inline-block;
width: 30%;
margin: 0 1%;
vertical-align: middle;
}
.scroll-images img:first-child {
margin-left: 0;
}
.scroll-images img:last-child {
margin-right: 0;
}
.scroll-images img:hover {
opacity: 0.7;
cursor: pointer;
}
.scroll-images img:focus {
outline: none;
}

此段 CSS 代碼主要作用是： - 設置圖片的寬度和滾動區域的寬度為 100%； - 為滾動區域設置溢出隱藏，使得只顯示一部分圖片，而其他圖片會被隱藏； - 將圖片不換行地顯示出來，并且取消了各個圖片之間的空隙； - 給圖片之間的間距加上 1% 的 margin； - 設定第一個圖片的 margin 為 0，讓它們貼著滾動區域最左邊； - 設定最后一個圖片的 margin 為 0，讓它們貼著滾動區域最右邊； - 當鼠標指針移到圖片上時，會降低圖片的透明度，并且改變指針類型，同時在圖片獲得焦點時，取消它的虛線框。 JavaScript 代碼 除了 HTML 和 CSS 代碼外，還需要 JavaScript 代碼幫助實現圖片的滾動。這是 JavaScript 代碼段：

const scrollArea = document.querySelector('.scroll-images');
let scrollInterval = null;
function scrollImages(direction) {
let scrollAmount = 0;
scrollInterval = setInterval(function() {
if (direction === 'right') {
scrollArea.scrollLeft += 10;
} else {
scrollArea.scrollLeft -= 10;
}
scrollAmount += 10;
if (scrollAmount >= 300) {
window.clearInterval(scrollInterval);
}
}, 20);
}
document.querySelector('.btn-scroll-left').addEventListener('click', function() {
window.clearInterval(scrollInterval);
scrollImages('left');
});
document.querySelector('.btn-scroll-right').addEventListener('click', function() {
window.clearInterval(scrollInterval);
scrollImages('right');
});

此段代碼通過定義了兩個按鈕，并為按鈕添加了 click 事件來實現圖片的滾動。當用戶單擊按鈕時，函數 scrollImages 將被調用，開始進行圖片的滾動。 通過上述 HTML、CSS 和 JavaScript 組成，我們就可以實現一個美觀、優雅、流暢和酷炫的圖片左右滾動效果。