Javascript 添加第二个幻灯片放映后，幻灯片放映停止工作

我的网页有问题。 在网页上添加第二个幻灯片后，我的第一个幻灯片被粘贴在第二个图像上。 第一个工作得很好。

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

下面是我的代码：

//风格

<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，幻灯片2{
显示：无；
}
img{垂直对齐：中间；}
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
多特先生{
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.主动{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}

//幻灯片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>

var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“Slides1”）；
对于（i=0；islides.length）{slideIndex=1}
幻灯片[slideIndex-1].style.display=“block”；
设置超时（显示幻灯片，2500）；
}

//幻灯片2

<!-- 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>

var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“Slides2”）；
对于（i=0；islides.length）{slideIndex=1}
幻灯片[slideIndex-1].style.display=“block”；
设置超时（显示幻灯片，2500）；
}

只需将幻灯片索引和showSlides更改为第二个幻灯片放映的不同名称

slideIndex

和

showSlides

在javascript2中“替换”javascript 1中的

slideIndex

和

showSlides

-也就是说，您不能两次拥有相同的变量/函数名，并期望两者都存在：p-简单解决方案，将javascript1和javascript2中的所有代码封装在一个IIFE中<代码>（函数（）{…代码在这里…}）（）哎，我真傻。明白了谢谢