编辑W3School幻灯片的JavaScript代码

Question

我想从W3School添加幻灯片到我的网站，问题是我需要超过1张幻灯片，W3School的JavaScript代码仅适用于单个幻灯片。

在StackOverflow上搜索答案我找到了一个与我有同样问题的用户，我们做了同样的事情，试图让脚本适应我们的需要......显然没有成功。< / p>

用户回答过发布的编辑过的脚本不仅适用于幻灯片，而且我尝试将该脚本用于幻灯片，但出于某种原因，它仅适用于1次幻灯片演示。

以下是我所指的答案：https://stackoverflow.com/a/46727534/9276807

以下是我的幻灯片：

＆＃13;

＆＃13;

var slideIndex = new Array(2);
slideIndex[0] = 1;
slideIndex[1] = 1;

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


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

function currentSlide(n, slideshownumber) {
  slideIndex[slideshownumber] = n;
  showSlides(slideIndex[slideshownumber], slideshownumber);
}

function showSlides(n, slideshownumber) {
  var i;
  var slideshowname = "slider" + slideshownumber;
  var slides = document.getElementsByName(slideshowname);

  if (n > slides.length) {
    slideIndex[slideshownumber] = 1;
  }

  if (n < 1) {
    slideIndex[slideshownumber] = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex[slideshownumber] - 1].style.display = "block";
}

＆＃13;

.tooltip {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #000000;
}

.tooltip:hover .info,
.tooltip:focus .info {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.info {
  box-sizing: border-box;
  position: absolute;
  bottom: -980px;
  left: 95px;
  display: block;
  background: #FFFFFF;
  border: 1px solid #000000;
  width: 500px;
  font-size: 25px;
  line-height: 24px;
  text-align: justify;
  cursor: text;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition: all .5s ease-out;
}

.info:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 14px;
  bottom: -14px;
  left: 0;
}

.info:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  bottom: 378px;
  right: 494px;
  margin-left: -5px;
  background: #000000;
}

.slideshow-container {
  width: 100%;
  height: 300px;
  position: relative;
  margin: 0;
  padding: 0;
}

.mySlides {
  display: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

.slideshow-container .imgsl {
  position: relative;
  width: 100%;
  height: 300px;
}

.slideshow-container .cptn {
  background-color: rgba(242, 242, 242, 0.5);
  color: #FFFFFF;
  font-size: 25px;
  padding: 8px 0 15px 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 140px;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

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

.prev:hover,
.next:hover {
  background-color: rgba(242, 242, 242, 0.3);
}

.text {
  display: block;
  padding: 14px 17px 35px 17px;
  color: #8d7200;
}

.more {
  display: inline;
  position: relative;
  bottom: 20px;
  left: 215px;
  margin: 0;
  padding: 3px 10px;
  font-family: 'Times New Roman', sans-serif;
  text-decoration: none;
  color: green;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid green;
  border-radius: 5px;
  transition: background-color 0.5s, color 0.5s;
}

.more:hover,
.more:focus {
  background-color: green;
  color: #FFFFFF;
}

＆＃13;

<div onclick="void(0);" class="tooltip">Trasimeno
  <div class="info">
    <div class="slideshow-container">
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno.jpg">
        <div class="cptn">Passignano Sul Trasimeno</div>
      </div>
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno2.jpg">
        <div class="cptn">Castello del Leone, Castiglione del Lago</div>
      </div>
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno3.jpg">
        <div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
      </div>
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno4.jpg">
        <div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
      </div>

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

    <script>
      currentSlide(1, 0)
    </script>

    <div class="text">...</div>
    <a class="more" href="#" target="_blank">More</a>
  </div>
</div>

, il lago di

<div onclick="void(0);" class="tooltip">Piediluco
  <div class="info">
    <div class="slideshow-container">
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco2.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco3.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco4.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>

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

    <script>
      currentSlide(1, 1)
    </script>

    <div class="text">...</div>
    <a class="more" href="#">More</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有人可以帮我理解我做错了吗？

提前致谢！

Answer 1

您收到错误：

  

＆＃34;未捕获的ReferenceError：currentSlide不是

因此，currentSlide()试图在定义之前调用它！

确保您的JS代码（定义{{​​1}}）在调用之前先执行。

此外，为 Piediluco 幻灯片调用function currentSlide(n, slideshownumber){}...而非plusSlides()幻灯片：

plusSlides2()

也改变了：

<div onclick="void(0);" class="tooltip">Piediluco
    <div class="info">
        <div class="slideshow-container">
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco2.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco3.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco4.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>

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

        <script> currentSlide(1,1)</script>

        <div class="text">...</div>
            <a class="more" href="#">More</a>
        </div>
    </div>