css做一个图片轮播图

CSS做图片轮播图，通常使用CSS3中的transition动画效果实现图片的轮播和切换，同时结合HTML和JavaScript来实现一些交互效果。

 /* HTML结构 */
  <div class="slider">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>

  /* CSS样式 */
  .slider {
    overflow: hidden; /* 隐藏溢出部分 */
    position: relative; /* 相对定位，以便子元素绝对定位 */
    height: 600px; /* 设置容器高度 */
  }

  .slider img {
    position: absolute; /* 绝对定位，覆盖在容器上 */
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out; /* 设置transition动画效果 */
    transform: translateX(0); /* 初始位置 */
  }

  /* JavaScript代码 */
  let images = document.querySelectorAll(".slider img"); // 获取所有图片
  let current = 0; // 当前图片下标

  setInterval(() => {
    current++;
    if (current >= images.length) {
      current = 0;
    }
    images.forEach((img,index) => {
      if (index == current) {
        img.style.transform = "translateX(0)";
      } else {
        img.style.transform = "translateX(100%)";
      }
    });
  },3000); // 3秒钟切换一次图片 

上面的代码中，我们使用了CSS3中的transition动画效果来实现图片的切换，具体实现方法是通过transform属性在X轴上平移来实现。同时，JavaScript代码中通过setInterval函数定时执行切换逻辑，获取所有图片并进行轮播，判断当前图片下标并通过CSS样式进行切换。

以上就是使用CSS做一个基本的图片轮播图的方法，通过不同的CSS样式和JavaScript逻辑，可以实现更加丰富多彩且复杂的图片轮播效果。