Question

我有这份工作表要完成，其中一个问题是解释这段代码并再添加一张图片幻灯片。

我不太了解 javascript 代码，对如何添加另一个图像幻灯片有点困惑。

我了解 HTML 和 css，但 javascript 令人困惑。任何帮助将不胜感激。

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}

* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

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

/* Next & previous buttons */
.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;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
  </div>

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

Answer 1

我使用 IDE 将代码更新为人类可读的。我相信现在已经很简单了。如果你不明白具体的部分，你可以在评论中问我。（这不是高质量的代码，我相信这是一个学习练习，所以我保持原样）

var slideIndex = [1, 1, 1];
var slideContainerSelectors = ["mySlides1", "mySlides2", "mySlides3"]

function showSlides(nextslideIndex, slideContainerIndex) {
  var i;
  var slideContainerElement = document.getElementsByClassName(slideContainerSelectors[slideContainerIndex]);
  if (nextslideIndex > slideContainerElement.length) {
    slideIndex[slideContainerIndex] = 1
  }
  if (nextslideIndex < 1) {
    slideIndex[slideContainerIndex] = slideContainerElement.length
  }
  for (i = 0; i < slideContainerElement.length; i++) {
    slideContainerElement[i].style.display = "none";
  }
  slideContainerElement[slideIndex[slideContainerIndex] - 1].style.display = "block";
}

function plusSlides(increment, index) {
  showSlides(slideIndex[index] += increment, index);
  //----------------------------^ slideIndex[index] = slideIndex[index] + increment
}

showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

* {
  box-sizing: border-box
}

.mySlides1,
.mySlides2 {
  display: none
}

img {
  vertical-align: middle;
}


/* Slideshow container */

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


/* Next & previous buttons */

.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;
}


/* Position the "next button" to the right */

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


/* On hover, add a grey background color */

.prev:hover,
.next:hover {
  background-color: #f1f1f1;
  color: black;
}

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%">
  </div>

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

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides3">
    <img src="https://picsum.photos/200/300" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="https://picsum.photos/id/237/200/300" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="https://picsum.photos/id/238/200/300" style="width:100%">
  </div>

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

添加多个图像幻灯片

1 个答案: