响应式大图幻灯片制作教程 - 宽度100%，高度500px

以下是一个基本的大图幻灯片的功能，宽度为100%，高度为500px，并且是响应式的：

HTML代码：

<div class='slideshow-container'>
  <div class='mySlides fade'>
    <img src='img1.jpg' style='width:100%'>
  </div>

  <div class='mySlides fade'>
    <img src='img2.jpg' style='width:100%'>
  </div>

  <div class='mySlides fade'>
    <img src='img3.jpg' style='width:100%'>
  </div>

  <a class='prev' onclick='plusSlides(-1)'>&#10094;</a>
  <a class='next' onclick='plusSlides(1)'>&#10095;</a>
</div>

CSS代码：

.slideshow-container {
  max-width: 100%;
  height: 500px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
  max-width: 100%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

JavaScript代码：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName('mySlides');
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
  }
  slides[slideIndex - 1].style.display = 'block';
}

注释：

• HTML代码：使用div元素作为容器，并包含幻灯片的图像。使用两个按钮（前进和后退）切换到下一个或上一个幻灯片。
• CSS代码：设置幻灯片容器的最大宽度和高度，并使用position属性使幻灯片绝对定位。使用动画效果（渐变）来显示或隐藏幻灯片。
• JavaScript代码：定义一个变量slideIndex来跟踪当前显示的幻灯片的编号。使用showSlides函数来显示或隐藏幻灯片。通过plusSlides函数来切换到下一个或上一个幻灯片。