添加第二张幻灯片后，幻灯片停止播放

Question

我的网页有问题。 在网页上添加第二张幻灯片后，我的第一张幻灯片被粘贴在第二张图像上。 第一个运行良好。

左一个（第一个幻灯片）粘贴在第二个图像上，而右一个（第二个幻灯片）正常工作。我已经检查了代码，找不到任何错误。

下面是我的代码：

//样式

<style>
 .Slides1, Slides2{
 display: none;
 }

 img {vertical-align: middle;}

 .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  }

  .dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  }

  .active {
  background-color: #717171;
  }

  /* Fading animation */
  .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}
  }
  </style>

//幻灯片1

<!-- Slideshow1 -->
  <div style="display: table-cell; background-color:white">
  <div class="slideshow-container" style="padding-left:120px">

  <div class="Slides1 fade">
  <img src="1.jpg" style="width:65%;">
  <br>
  Home Theatre Systems
  </div>
  <div class="Slides1 fade">  
  <img src="1.2.jpg" style="width:65%">
  <br>
  Automatic Hygiene System
  </div>
  <div class="Slides1 fade">  
  <img src="1.3.jpg" style="width:65%">
  <br>
  Computer Peripherals
  </div>
  <div class="Slides1 fade">  
  <img src="1.4.jpg" style="width:65%">
  <br>
  High End Radio Controlled Products
  </div>
  </div>
  </div>
  <!-- ------------------------------------------------------------------ -->

// JavaScript 1

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("Slides1");
for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none"; 
    }
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1} 
slides[slideIndex-1].style.display = "block"; 
setTimeout(showSlides, 2500); 

  }
 </script>

// Slideshow2

<!-- Slideshow2 -->
  <div style="display: table-cell; background-color:#AED6F1">
  <div class="slideshow-container" style="padding-left:120px">

  <div class="Slides2 fade">
  <img src="2.1.jpg" style="width:65%;">
  <br>
  Home Theatre Systems
  </div>
  <div class="Slides2 fade">  
  <img src="2.2.jpg" style="width:65%">
  <br>
  Automatic Hygiene System
  </div>
  <div class="Slides2 fade">  
  <img src="2.3.jpg" style="width:65%">
  <br>
  Computer Peripherals
  </div>
  <div class="Slides2 fade">  
  <img src="2.4.jpg" style="width:65%">
  <br>
  High End Radio Controlled Products
  </div>
  </div>
  </div>
  <!-- ------------------------------------------------------------------ -->

// JavaScript 2

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("Slides2");
for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none"; 
    }
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1} 
slides[slideIndex-1].style.display = "block"; 
setTimeout(showSlides, 2500); 

  }
</script>

Answer 1

只需将第二个幻灯片的slideIndex和showSlides更改为其他名称