<div class="banner"> <!--轮播图部分--> <img src="img/1.jpg" alt="inte1" class="slide"> <img src="img/2.jpg" alt="inte2" class="slide"> <img src="img/3.jpg" alt="inte3" class="slide"> </div>实现轮播图

实现轮播图可以使用 JavaScript 和 CSS，以下是一个简单的实现方式：

HTML 代码：

<div class="banner">
    <!--轮播图部分-->
    <img src="img/1.jpg" alt="inte1" class="slide">
    <img src="img/2.jpg" alt="inte2" class="slide">
    <img src="img/3.jpg" alt="inte3" class="slide">
</div>

CSS 代码：

.banner {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}

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

.slide.active {
    opacity: 1;
}

JavaScript 代码：

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
const slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].classList.add('active');
}

这样就可以实现一个简单的轮播图效果。你可以根据需要修改 CSS 样式和 JavaScript 代码。