Question

我制作了一个带有幻灯片放映的模式窗口，当您单击移动尺寸屏幕宽度的缩略图时，在其中弹出全屏。当我在笔记本电脑上时，我希望此幻灯片显示始终可见，而不再单击缩略图，尽管我仍然希望单击缩略图以显示正确的幻灯片。我现在的问题是，如果我将模式隐藏物保持在笔记本电脑的屏幕尺寸中，或者如果我将其隐藏在笔记本中，则幻灯片显示将无法正常工作，除非我先单击其中一个缩略图。如果我直接单击第一张幻灯片而没有先进入缩略图，那么我有

travel.html：252未捕获的ReferenceError：未定义slideIndex 在plusSlides（travel.html：252）在HTMLAnchorElement.onclick（VM536 travel.html：73）

我完全是一个初学者，因为这是我正在做的第一个网站，如果我的html和CSS混乱，请原谅我。

HTML

<body>
  <div id="mainMenu" class="main-menu">
    <div id="header">
    </div>

    /!-- Thumbnails gallery --/

    <div id="gallery">
      <img class="thumbnails" id="antalya" src="pictures/IMG_1673_tonemapped.jpg" alt="antalya" onclick="openModal();currentSlide(1)"> /!-- more thumbnails going there -->

      <img class="thumbnails" id="mongolia" src="pictures/IMG_7765_tonemapped-2.jpg" alt="mongolia" onclick="openModal();currentSlide(19)">
    </div>
    /!-- Slideshow in the modal window --/

    <div id="modal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span> /!-- close button for mobile--/

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

        <div class="mySlides" id="slide1">
          <img class="full" src="pictures/IMG_1673_tonemapped.jpg" alt="antalya">
          <div class="gradiantbackground">
            <h3 class="title">antalya</h3>
            <a class="view" href="antalya.html">
              <h4 class="view">-view-</h4>
            </a>
          </div>
        </div>

        /!-- more slides going there --/

        <div class="mySlides" id="slide20">
          <img class="full" src="fulls/12.jpg" alt="blur">
          <div class="gradiantbackground">
            <h3 class="title">temporary</h3>
            <a class="view" href="mongolia.html">
              <h4 class="view">-view-</h4>
            </a>
          </div>
        </div>
      </div>
    </div>

JAVASCRIPT

var modal = document.getElementById("modal");
var mainMenu = document.getElementById("mainMenu");
var span = document.getElementsByClassName("close")[0];

function openModal() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}


function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

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

CSS

/* mobile max width 425px */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

.modal-content {
  background-color: #fefefe;
  height: 100%;
  width: 100%;
}


/* desktop and tablets */

body .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  display: block;
  height: 100%;
  overflow: hidden;
}

.mySlides {
  display: none;
}

#slide1 {
  display: block;
}

我希望幻灯片显示从第一个幻灯片显示开始，模态窗口始终显示为块。当我进入首页时，可以看到显示的第一张幻灯片，带有上一个和下一个按钮，但是当我单击它时，控制台将向我显示

travel.html：252未捕获的ReferenceError：未定义slideIndex 在plusSlides（travel.html：252）在HTMLAnchorElement.onclick上（VM536 travel.html：73）。

如果我先单击相当于当前幻灯片的缩略图，则上一个和下一个按钮将起作用。

手机上的模态窗口幻灯片需要在桌面上定期阻止幻灯片放映

0 个答案: