在網(wǎng)站制作中，經(jīng)常會有圖片輪播播放的需求，其中之一就是通過左右按鈕來切換圖片。本文將介紹如何使用CSS實現(xiàn)左右按鈕換圖片的效果。

首先，在HTML中創(chuàng)建一個包含輪播圖片的容器，為了方便管理和定位，可以給其設(shè)置一個id。

<div id="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>

接著，在CSS中給圖片容器設(shè)置寬度、高度、背景色和overflow:hidden，使其只顯示一個圖片，其余圖片被隱藏。

#slider {
width: 500px;
height: 300px;
background-color: #ccc;
overflow: hidden;
}

然后，在CSS中通過position:relative來給圖片設(shè)置定位，并左右浮動，同時設(shè)置一個較大的z-index值，使其不被其他元素覆蓋。

#slider img {
position: relative;
float: left;
z-index: 1;
}

現(xiàn)在就可以使用左右按鈕來切換圖片了。我們在HTML中添加兩個按鈕，分別為“上一個”和“下一個”，同樣為了方便管理和定位，可以給其設(shè)置一個id。在CSS中設(shè)置按鈕的樣式。

<div id="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<button id="prev">上一個</button>
<button id="next">下一個</button>
</div>
#prev, #next {
position: absolute;
top: 40%;
font-size: 24px;
color: #fff;
background-color: #000;
border: none;
padding: 10px 20px;
z-index: 2;
}
#prev {
left: 0;
}
#next {
right: 0;
}

接下來，在JavaScript中使用事件監(jiān)聽器來實現(xiàn)按鈕的點擊事件。當(dāng)點擊“上一個”按鈕時，圖片容器向左移動一個圖片的寬度，當(dāng)點擊“下一個”按鈕時，圖片容器向右移動一個圖片的寬度。

// 獲取圖片容器的寬度和左右按鈕
var slider = document.getElementById('slider');
var sliderWidth = slider.offsetWidth;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
// 設(shè)置初始位置
var position = 0;
// 點擊左右按鈕切換圖片
prev.addEventListener('click', function() {
// 如果當(dāng)前圖片不是第一張，則向右移動一個圖片的寬度
if (position >-sliderWidth) {
position -= sliderWidth;
slider.style.left = position + 'px';
}
});
next.addEventListener('click', function() {
// 如果當(dāng)前圖片不是最后一張，則向左移動一個圖片的寬度
if (position< 0) {
position += sliderWidth;
slider.style.left = position + 'px';
}
});

到此為止，就實現(xiàn)了左右按鈕換圖片的效果。