Question

此代码取自W3schools.com。我所做的就是复制并粘贴一个额外的div框以创建一个新列。问题是，当我单击第二行的图像以将其放大时，代码将我带回到第一行的第一图像。我不确定单击想要放大的任何图像的整体功能是什么。

我想要的是能够用更多图片扩展行，然后能够任意单击，然后灯箱模式从我单击的图片开始，而不是网页上的第一张图片。

完整代码可在以下位置找到：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox

       <h2 style="text-align:center">Sneek Peek</h2>

       <div class="row">
     <div class="column">
       <img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" 
       class="hover-shadow cursor">
      </div>
         <div class="column">
      <img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover- 
        shadow cursor">
         </div>
        <div class="column">
     <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" 
       class="hover- 
       shadow cursor">
        </div>
        <div class="column">
           <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" 
       class="hover- 
         shadow cursor">
      </div>

      <div class="column">
     <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover- 
   shadow cursor">
   </div>
 </div>

      <div id="myModal" class="modal">
      <span class="close cursor" onclick="closeModal()">&times;</span>
     <div class="modal-content">

    <div class="mySlides">

     <img src="img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">

     <img src="img_snow_wide.jpg" style="width:100%">
    </div>

     <div class="mySlides">

      <img src="img_mountains_wide.jpg" style="width:100%">
     </div>

     <div class="mySlides">

     <img src="img_lights_wide.jpg" style="width:100%">
     </div>

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

      <div class="caption-container">
      <p id="caption"></p>
     </div>

      <div class="mySlides">

     <img src="img_nature_wide.jpg" style="width:100%">
    </div>


   <div class="column">
   <img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)">
   </div>
   <div class="column">
   <img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)">
  </div>
  <div class="column">
  <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)">
  </div>
  <div class="column">
  <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)">
  </div>
  </div>
 </div>

     <script>
        function openModal() {
    document.getElementById("myModal").style.display = "block";
  }

  function closeModal() {
     document.getElementById("myModal").style.display = "none";
  }

  var slideIndex = 1;
  showSlides(slideIndex);

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

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

 function showSlides(n) {
 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("demo");
 var captionText = document.getElementById("caption");
 if (n > slides.length) {slideIndex = 1}
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";
 }
 for (i = 0; i < dots.length; i++) {
 dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

</body>
</html>

Answer 1

这是因为在单击新的第五张幻灯片时，执行onclick="openModal();currentSlide(1)"

为了了解单击时发生的情况，需要转到script部分并了解这两个功能的作用。

由于您是从w3schools获得的，因此他们在其页面上添加了注释和解释。因此，我可以建议您首先第一，除非您了解代码的用途，否则不要使用代码；第二 – w3schools的示例不一定总是准确的，因此最好改变资源。

我建议MDN-他们确实有good tutorials。

享受代码！

灯箱幻灯片问题

1 个答案: