实现css通过点击箭头切换图片

可以通过以下步骤实现：

1. 在HTML中创建一个包含所有图片的容器，如div，并为其设置固定宽度和高度。

2. 在容器内添加多个img标签，每个标签对应一张图片，并设置它们的display属性为none，以隐藏它们。

3. 创建两个按钮，分别用于向前和向后切换图片，并为它们添加事件监听器。

4. 在事件监听器中，使用JavaScript获取所有img标签，并根据当前显示的图片，切换到下一张或上一张图片。同时，将当前显示的图片的display属性设置为none，将要显示的图片的display属性设置为block。

5. 使用CSS对按钮进行样式设置。

以下是示例代码：

HTML：

<div class="image-container">
    <img src="image1.jpg" alt="Image 1" />
    <img src="image2.jpg" alt="Image 2" />
    <img src="image3.jpg" alt="Image 3" />
</div>

<button class="prev-btn">Prev</button>
<button class="next-btn">Next</button>

CSS：

.image-container {
    width: 500px; /* 设置容器宽度 */
    height: 300px; /* 设置容器高度 */
    position: relative; /* 设置相对定位，以便于设置子元素的绝对定位 */
}

.image-container img {
    position: absolute; /* 设置绝对定位 */
    top: 0;
    left: 0;
    display: none; /* 隐藏所有图片 */
}

.prev-btn,
.next-btn {
    position: absolute;
    top: 50%; /* 将按钮垂直居中 */
    transform: translateY(-50%); /* 将按钮向上移动自身高度的一半，以实现垂直居中 */
    padding: 10px 20px;
    background-color: #ccc;
    border: none;
    cursor: pointer;
}

.prev-btn {
    left: 20px; /* 将“上一张”按钮定位到容器左边缘 */
}

.next-btn {
    right: 20px; /* 将“下一张”按钮定位到容器右边缘 */
}

JavaScript：

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const images = document.querySelectorAll('.image-container img');
let currentImageIndex = 0;

function showImage(index) {
    images[currentImageIndex].style.display = 'none'; // 隐藏当前图片
    images[index].style.display = 'block'; // 显示目标图片
    currentImageIndex = index; // 更新当前图片索引
}

prevBtn.addEventListener('click', () => {
    let index = currentImageIndex - 1;
    if (index < 0) {
        index = images.length - 1;
    }
    showImage(index);
});

nextBtn.addEventListener('click', () => {
    let index = currentImageIndex + 1;
    if (index >= images.length) {
        index = 0;
    }
    showImage(index);
});

showImage(currentImageIndex); // 初始化显示第一张图片