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

Question

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

无论如何，我制作了一个带有特定布局的 CSS Grid，并很好地填充了不同的内容。基本上只剩下一个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>