如何使图像滑块淡入淡出？(没有Jquery)

要实现图像滑块的淡入淡出效果，可以使用CSS和JavaScript来完成。以下是一种实现方式：

HTML结构：

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

CSS样式：

.slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

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

.slider img.active {
  opacity: 1;
}

JavaScript代码：

const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
let currentIndex = 0;

function fadeInOut() {
  // 淡出当前图片
  images[currentIndex].classList.remove('active');
  
  // 计算下一张图片的索引
  currentIndex = (currentIndex + 1) % images.length;
  
  // 淡入下一张图片
  images[currentIndex].classList.add('active');
}

// 设置定时器，每隔3秒执行一次淡入淡出效果
setInterval(fadeInOut, 3000);

这段代码实现了一个简单的图像滑块淡入淡出效果。通过CSS的opacity属性和过渡效果，实现了图片的淡入淡出效果。JavaScript部分则负责控制图片的切换和添加/移除CSS类来触发过渡效果。

这个效果可以应用于图片轮播、幻灯片展示等场景。如果你想了解更多关于图片轮播的实现方式，可以参考腾讯云的产品介绍链接：腾讯云图片处理。