图片自动幻灯片放映html css - Html

这是一个使用HTML和CSS实现的自动图片幻灯片放映的程序。用户可以在网页上自定义图片，并设定展示时间和过渡效果。这个程序的核心是使用了HTML中的<img>标签和CSS的动画效果。

实现步骤

1. HTML

在HTML文件中创建一个<div>元素（或其他元素），用于容纳幻灯片。然后使用<img>标签来载入需要展示的图片。使用<div>元素来放置幻灯片的说明文字和按钮。

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="image1.png" style="width:100%"/>
  </div>

  <div class="mySlides fade">
    <img src="image2.png" style="width:100%"/>
  </div>
  
  <div class="mySlides fade">
    <img src="image3.png" style="width:100%"/>
  </div>

  <div class="slideshow-text">
    <h1>图片说明</h1>
  </div>

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

2. CSS

使用CSS样式表来定义幻灯片的样式和动画。首先，需要隐藏所有幻灯片的文字说明和按钮。然后，定义幻灯片的基本样式，包括宽度和高度。其次，通过定义opacity属性为0，将所有幻灯片的不透明度设为0，这样它们就不会显示在页面上。最后，定义使用CSS动画的渐隐渐显效果，使得每张幻灯片在展示前进行淡出，展示完毕进行淡入。

/* Hide text and buttons */
.slideshow-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 20px;
  color: #f2f2f2;
  font-size: 20px;
  font-weight: bold;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  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);
}

/* Slideshow */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  height: 500px;
}

/* Images */
.mySlides {
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-in-out;
}

/* Animation */
.fade {
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

3. JavaScript

使用JavaScript来实现幻灯片的自动播放和按钮控制。首先，定义一个currentSlide变量来跟踪当前的幻灯片。然后，定义showSlides函数，它接受一个参数n，用于控制幻灯片的展示。showSlides函数先将所有的幻灯片隐藏，然后将当前幻灯片和其相邻的两张幻灯片展示出来。最后，设置一个定时器，定期调用showSlides函数，来控制幻灯片的播放。

var currentSlide = 0;

function showSlides(n) {
  var slides = document.getElementsByClassName("mySlides");
  
  // Hide all slides
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].classList.remove("fade");
    slides[i].classList.remove("fade-out");
  }
  
  // Show the current slide and its neighbors
  slides[currentSlide].style.display = "block";
  slides[currentSlide].classList.add("fade");
  if (n < 0) {
    slides[currentSlide].classList.add("fade-out");
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  } else {
    currentSlide = (currentSlide + 1) % slides.length;
  }
  slides[currentSlide].style.display = "block";
  slides[currentSlide].classList.add("fade");
  
  // Set a timer for the next slide
  setTimeout(function() { showSlides(1); }, 5000);
}

// Start the slideshow
showSlides(1);

结束语

通过HTML和CSS定义幻灯片的样式和动画，通过JavaScript实现自动播放和按钮控制，我们成功地创建了一个图片自动幻灯片放映的程序。该程序可以让用户展示图片，并设定展示方式，可以应用于个人网站、企业展示等多种场景。