css 图片 幻灯片代码

幻灯片是网页设计中常用的元素之一，通过幻灯片能够将多张图片或内容进行切换展示。而要制作幻灯片，CSS是必不可少的工具之一。下方的代码为一个基本的CSS图片幻灯片代码，可以供大家参考使用。

/* 容器样式 */
.slider {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* 图片样式 */
.slider img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 将图片放到底层，避免遮挡 */
  opacity: 0; /* 图片默认不可见 */
  transition: opacity 0.5s ease-in-out; /* 过渡效果，持续0.5秒，缓入缓出 */
}

/* 小圆点样式 */
.slider .dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.slider .dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.5s ease-in-out;
}

.slider .dots span.active {
  background-color: #333; /* 当前圆点样式 */
}

/* JavaScript代码 */
let sliderIndex = 0;
const sliderImgs = document.querySelectorAll('.slider img');
const sliderDots = document.querySelectorAll('.slider .dots span');
setInterval(() => {
  sliderIndex++;
  if (sliderIndex === sliderImgs.length) {
    sliderIndex = 0;
  }
  sliderImgs.forEach(img => {
    img.style.opacity = 0;
  });
  sliderImgs[sliderIndex].style.opacity = 1;
  sliderDots.forEach(dot => {
    dot.classList.remove('active');
  });
  sliderDots[sliderIndex].classList.add('active');
},3000);

以上代码中，我们定义了一个.slider容器来存放图片和小圆点，设置宽度、高度以及相对定位，使用overflow:hidden禁止内容溢出。图片默认不可见，使用opacity控制其透明度，同时添加过渡效果。小圆点使用flex布局居中显示，并设置样式。JavaScript代码中，我们使用setInterval函数定时切换图片，同时更新小圆点样式。

这是一个基本的CSS图片幻灯片代码，大家可以根据实际需求进行修改和优化，添加更多的特效和动画效果。