CSS3淡入淡出动画效果与幻灯片效果

/* 定义基本元素样式 */
.slider {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
 
.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
 
/* 第一个幻灯片应该是可见的 */
.slider img:first-child {
  opacity: 1;
}
 
/* JavaScript 控制每个幻灯片的淡入淡出 */
<script>
  function slideSwitch() {
    var slides = document.querySelectorAll('.slider img');
    for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
    }
    index = (index >= slides.length) ? 0 : index;
    slides[index].style.opacity = 1;
  }
 
  // 设置定时器每5秒调用一次slideSwitch函数
  var index = 0;
  setInterval(slideSwitch, 5000);
</script>

这个简单的示例展示了如何使用CSS3的transition属性和JavaScript来创建一个基本的幻灯片效果。每个图片元素都会在进入和退出时有一个淡入淡出的动画效果。通过JavaScript的setInterval函数，我们可以定期切换图片的不透明度，从而实现幻灯片效果。