<div class="banner"> <!--轮播图部分--> </div>添加三张照片做轮播图

您可以尝试使用以下代码实现三张照片轮播图：

<div class="banner">
    <img class="slide" src="image1.jpg" alt="Image 1">
    <img class="slide" src="image2.jpg" alt="Image 2">
    <img class="slide" src="image3.jpg" alt="Image 3">
</div>

然后，您可以使用 CSS 来设置轮播图的样式和动画效果。例如：

.banner {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide:first-child {
    opacity: 1;
}

.banner:hover .slide {
    opacity: 0.5;
}

.banner:hover .slide:hover {
    opacity: 1;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.banner .slide {
    animation: slide 5s infinite;
}

这些代码将创建一个包含三张图片的轮播图，并在鼠标悬停时启用动画效果。您可以根据需要进行调整和修改。