我可以将多个图像堆叠在一起并在它们之间切换吗？ HTML、CSS、Java 脚本

Question

我目前正在学习 html 和 css 以及一点点 javascript。 我完全是自学的。 所以我的大部分代码可能看起来很业余。

无论如何，我制作了一个具有特定布局的 CSS 网格，并用不同的内容很好地填充了它。 基本上只剩下一个 div 了。 我想知道，是否可以将多个图像放在一起。 我自己绘制和编辑了图像，只是为了确保，我在不同的“一次性代码”中使用了它们。 没有问题。

用户应该能够单击 div 内的按钮并切换图像。 图 1 是默认设置。 用户按下按钮，图像 1 消失，下一个图像 2 出现，依此类推……直到它再次从图像 1 开始。非常类似于图片库的东西。

我绘制的图像是我网站的某种解释性指南，我想使用。

我只是不确定，如果可能的话，因为我对 java 脚本的知识非常缺乏。 我不是在寻求解决方案，而是哪种方法是做到这一点的第一步。 我从一个基本的 HTML 和 CSS 代码开始。 （我只选择了这些位置值，所以我可以看到彼此重叠的图像）

HTML

<div class="box">

  <div class="img1 image-collection">
    Image 1
  </div>

  <div class="img2 image-collection">
    Image 2
  </div>  

  <div class="img3 image-collection">
    Image 3
  </div>  

</div>

CSS

    body {
  margin: 100px;
  padding: 0;
  height: 100%;
  background-color: #111416;
  color: #dfdfdf;
  position: relative;
}


.image-collection {
  width: 1200px;
  height: 900px;
  background-size: cover;
  background-repeat: no-repeat;

}

.img1 {
  background-image: url(../Images/example1.jpg);
  position: absolute;
  top: 10px;
  left: 90px;
}

.img2 {
  background-image: url(../Images/example2.jpg);
  position: absolute;
  top: 60px;
  left: 180px;
}

.img3 {
  background-image: url(../Images/example3.jpg);
  position: absolute;
  top: 110px;
  left: 270px;
}

Answer 1

这是您正在寻找的解决方案，随时更改图像/类；

 let activeImage =0;// starting image let allImages = $('.single-image'); // image container class function nextphoto(){ activeImage = activeImage + 1; if(activeImage> $(allImages).length -1){ activeImage = 0; } $('.single-image').removeClass('active-image'); $(allImages).eq(activeImage).addClass('active-image'); } function previousphoto(){ activeImage = activeImage - 1; if(activeImage<0){ activeImage = $(allImages).length - 1; } $('.single-image').removeClass('active-image'); $(allImages).eq(activeImage).addClass('active-image'); }

 img{ max-width:100%; height:auto; max-height:100%; } .image-collection{ max-width:100px; position:relative; min-width:100px; min-height:100px; max-height:100px; overflow:hidden; } .buttons{ margin-top:1em; } .single-image{ position:absolute; left:0; top:0; opacity:0; width:100%; height:100%; transition:opacity 0.1s ease-in-out; } .active-image{ opacity:1!important; } .buttons span{ cursor:pointer; display:inline-block; background:black; color:white; margin-left:1em; margin-right:1em; padding:0.5em; font-size:0.8em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-collection"> <div class="single-image active-image"> <img src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"> </div> <div class="single-image"> <img src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=840&q=80"> </div> <div class="single-image"> <img src="https://images.unsplash.com/photo-1561948955-570b270e7c36?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=601&q=80"> </div> </div> <div class="buttons"> <span onclick="previousphoto();">Previous</span> <span onclick="nextphoto();">Next</span> </div>