html中的简单图片覆盖图片答案

【问题标题】：simple picture over picture in htmlhtml中的简单图片覆盖图片
【发布时间】：2021-07-20 22:34:06
【问题描述】：

我试图建立一个网站，你点击一个文本，然后出现一张图片，当你点击这张图片时，下一张会出现，依此类推。如果您到达最后一张图片，则单击它时应该会出现第一张图片。我的代码非常复杂，它不适用于最后一张图片。我希望有人可以帮助我！

<head>
    <script type="text/javascript">
      function showImage() {
         document.getElementById('loadingimage').style.visibility="visible";
      }
      function showImage2() {
         document.getElementById('loadingimage2').style.visibility="visible";
      }
      function showImage3() {
         document.getElementById('loadingimage3').style.visibility="visible";
      }
    </script>
  </head>
  <body>
    <a onclick="showImage()">Hier clicken</a>
    <img onclick="showImage2()" id="loadingimage" src="pic/pic1.jpg" alt="" style="visibility:hidden"></img>
    <img onclick="showImage3()" id="loadingimage2" src="pic/pic2.jpg" alt="" style="visibility:hidden"></img>
    <img onclick="showImage4()" id="loadingimage3" src="pic/pic3.jpg" alt="" style="visibility:hidden"></img>
  </body>

【问题讨论】：

标签： javascript html image

【解决方案1】：

为简单起见，button 在您第一次单击按钮后将被隐藏。

let start = 0,
  total = 3,
  hasStarted = false;
const images = [...document.querySelectorAll(".image")];
const button = document.querySelector("button");

function showImage() {
  if (!hasStarted) {
    button.classList.add("hide")
    hasStarted = !hasStarted;
  }
  images.forEach(image => {
    if (image.classList.contains("show")) {
      image.classList.remove("show");
      image.classList.add("hide");
    }
  })
  document.querySelector(`.image${start}`).classList.add("show");
  ++start;
  start = start % total;
}

images.forEach(image => {
  image.addEventListener("click", showImage)
})

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

<button onclick="showImage()">Hier clicken</button>
<img class="image image0 hide" id="loadingimage1" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image1 hide" id="loadingimage2" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image2 hide" id="loadingimage3" src="https://source.unsplash.com/random/200x200" alt=""></img>

【讨论】：

【解决方案2】：

我觉得这就是你需要的：

<head>
  <script type="text/javascript">
    function showImage() {
      document.getElementById('loadingimage').style.visibility = "visible";
      document.getElementById('loadingimage').style.position = 'absolute';
    }

    function showImage2() {
      document.getElementById('loadingimage2').style.visibility = "visible";
      document.getElementById('loadingimage2').style.zIndex = '10';
      document.getElementById('loadingimage2').style.position = 'absolute'
    }

    function showImage3() {
      document.getElementById('loadingimage3').style.visibility = "visible";
      document.getElementById('loadingimage3').style.zIndex = '15';
      document.getElementById('loadingimage3').style.position = 'absolute'
    }
    
    function showImage4() {
      document.getElementById('loadingimage').style.zIndex = '20';
    }
  </script>
</head>

<body>
  <a onclick="showImage()">Hier clicken</a>
  <img onclick="showImage2()" id="loadingimage" src="https://source.unsplash.com/random/200x201" alt="" style="visibility:hidden">
  <img onclick="showImage3()" id="loadingimage2" src="https://source.unsplash.com/random/200x202" alt="" style="visibility:hidden">
  <img onclick="showImage4()" id="loadingimage3" src="https://source.unsplash.com/random/200x203" alt="" style="visibility:hidden">
</body>

【讨论】：