2

我有多个这样的图像：

<div class="img_fullscreen"><img onclick="openFullscreen();" class="img_fullscreen_icon" src="/images/fullscreen-icon.PNG"></div>
<img id="fullscreen" src="https://x" style="width:600px; height: 450px;">

我可以通过按下一个或上一个按钮来选择/浏览图像：

<a class="prev" onclick="plusSlides(-1)" style="color: white;font-weight: bold;font-size: 22px;">&#10094;</a>
<a class="next" onclick="plusSlides(1)" style="color: white;font-weight: bold;font-size: 22px;">&#10095;</a>

如何使全屏与多个图像一起使用？现在（请参阅下面包含的代码 java-code）我通过 id 获取元素("fullscreen")。这适用于 1 个 img，但如果我将 id 添加到多个图像中，它将不起作用（ofc）。我怎样才能做到这一点？我知道我可能可以为每个图像制作函数，但这非常“混乱”。我还想知道是否可以在全屏时显示下一个和上一个按钮，然后在全屏时能够在图像中移动。任何帮助是极大的赞赏！

  var elem = document.getElementById("fullscreen");
  function openFullscreen() {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
  }
4

0 回答 0