为 W3School 幻灯片编辑 JavaScript 代码

Question

我想将 W3School 的幻灯片添加到我的网站，问题是我需要不止一张幻灯片，而 W3School 的 JavaScript 代码仅适用于单个幻灯片。

在 Whosebug 上搜索答案时，我发现一个用户和我有同样的问题，我们也做了同样的事情，试图根据我们的需要调整脚本……显然没有成功。

一位用户回答发布了一个经过编辑的脚本，该脚本应该不仅仅用于幻灯片放映，我正在尝试将该脚本用于我的幻灯片放映，但由于某种原因它仅适用于 1 个幻灯片放映。

这里是我指的答案：

这是我的幻灯片：

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

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

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

有人可以帮助我了解我哪里做错了吗？

提前致谢！

Answer 1

您遇到错误：

"Uncaught ReferenceError: currentSlide is not

因此，currentSlide() 正在尝试在定义之前调用！

确保您的 JS 代码（定义 function currentSlide(n, slideshownumber){}... ）在调用之前首先执行。

此外，为 Piediluco 幻灯片调用 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>

还有变化：

<script> $(document).ready(function(){ currentSlide(1,1) })</script>

为 W3School 幻灯片编辑 JavaScript 代码

Editing JavaScript code for W3School slideshow

html

javascript

css

slideshow