添加第二个幻灯片后幻灯片停止工作答案

【问题标题】：Slideshow stop working after adding second slide show添加第二个幻灯片后幻灯片停止工作
【发布时间】：2020-04-28 15:37:23
【问题描述】：

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

左边的（第一张幻灯片）卡在第二张图片上，而右边的（第二张幻灯片）工作正常。我检查了代码，没有发现任何问题。

下面是我的代码：

//风格

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

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

【问题讨论】：

slideIndex and showSlides in javascript2 "replaces" slideIndex and showSlides in javascript 1 - 即你不能拥有相同的变量/函数名称两次并期望两者都存在： p - 简单的解决方案，将 所有代码 包装在 IIFE 中的 javascript1 和 javascript2 中...(function() { .... the code goes here ... })();
哎，我真傻。明白了，谢谢

标签： javascript html css

【解决方案1】：

只需将第二张幻灯片的 slideIndex 和 showSlides 更改为不同的名称

【讨论】：