<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> <script> const slides = document.querySelectorAll('.slide'); let slideIndex = 0; setInterval(() => { slides[slideIndex].style.display = 'none'; slideIndex = (slideIndex + 1) % slides.length; slides[slideIndex].style.display = 'block'; }, 3000); </script>给轮播图添加css效果

好的，以下是一个简单的轮播图 CSS 效果示例，您可以根据自己的需求进行修改：

<style>
  .banner {
    position: relative;
    width: 800px;
    height: 400px;
    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;
  }
</style>

<div class="banner">
  <img src="img/1.jpg" alt="inte1" class="slide active">
  <img src="img/2.jpg" alt="inte2" class="slide">
  <img src="img/3.jpg" alt="inte3" class="slide">
</div>

<script>
  const slides = document.querySelectorAll('.slide');
  let slideIndex = 0;

  setInterval(() => {
    slides[slideIndex].classList.remove('active');
    slideIndex = (slideIndex + 1) % slides.length;
    slides[slideIndex].classList.add('active');
  }, 3000);
</script>

上述代码中，我们给轮播图容器 `.banner` 设置了 `position: relative` 和 `overflow: hidden`，使得超出容器范围的图片被隐藏。我们给每张图片 `.slide` 设置了 `position: absolute` 和 `opacity` 属性，并添加了 CSS 过渡效果。每次切换图片时，我们使用 `classList` 来添加或移除 `.active` 类，从而切换图片的不透明度和过渡效果。

您可以根据自己的需求修改轮播图容器的宽度、高度、边距等属性，以及图片的大小、间距等属性。