有底部导航的html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图

可以使用以下代码实现底部导航的html图片自动淡出变化，用CSS3 transition属性实现淡入淡出轮播图：

HTML代码：

<div class="slideshow">
  <div class="slides">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
  <div class="nav">
    <div class="dots"></div>
  </div>
</div>

CSS代码：

.slideshow {
  position: relative;
  width: 100%;
  height: 400px;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ddd;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dots.active {
  background-color: #555;
}

.slideshow > .slides {
  animation: slide 10s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(-100%);
  }
  40% {
    transform: translateX(-200%);
  }
  50% {
    transform: translateX(-200%);
  }
  60% {
    transform: translateX(-300%);
  }
  70% {
    transform: translateX(-300%);
  }
  80% {
    transform: translateX(-400%);
  }
  90% {
    transform: translateX(-400%);
  }
  100% {
    transform: translateX(-500%);
  }
}

JavaScript代码：

var dots = document.querySelectorAll('.dots');
var slides = document.querySelector('.slides');

dots.forEach(function(dot, index) {
  dot.addEventListener('click', function() {
    slides.style.transform = 'translateX(-' + index * 100 + '%)';
    dots.forEach(function(dot) {
      dot.classList.remove('active');
    });
    this.classList.add('active');
  });
});

代码解释：

1. `.slideshow` 是包含轮播图和导航的容器，设置 `position: relative` 和 `height` 为容器高度。
2. `.slides` 是包含所有轮播图的容器，设置 `position: absolute`、`top: 0` 和 `left: 0`，并使用 Flexbox 布局，设置 `overflow-x: hidden` 隐藏溢出部分。
3. `.slides img` 是轮播图的样式，设置 `width: 100%`、`height: 100%` 和 `object-fit: cover`，让图片铺满容器并保持其纵横比。
4. `.nav` 是导航的容器，设置 `position: absolute`、`bottom: 20px`、`left: 50%` 和 `transform: translateX(-50%)`，使其居中且距离底部一定距离。
5. `.dots` 是导航的原点，设置 `width: 10px`、`height: 10px`、`margin: 0 5px`、`border-radius: 50%`、`background-color: #ddd` 和 `cursor: pointer`。使用 `transition: background-color 0.3s ease` 属性实现鼠标悬停时背景色的渐变效果。
6. `.dots.active` 是当前轮播图的导航原点，设置 `background-color: #555`。
7. `.slideshow > .slides` 使用动画 `slide` 实现轮播图的自动播放。其中，关键帧的百分比代表时间，`transform: translateX()` 属性实现图片的位移，`linear` 表示线性动画，`infinite` 表示无限循环。
8. JavaScript 代码使用 `querySelectorAll()` 方法获取所有导航原点，并使用 `addEventListener()` 方法为每个原点添加点击事件。点击时，设置 `.slides` 的 `transform` 属性，使其滚动到对应的轮播图，同时将当前原点添加 `active` 类，移除其他原点的 `active` 类。