我可以將多個影像堆疊在一起并在它們之間切換嗎？HTML、CSS、Java腳本

我目前正在學習 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;
}

uj5u.com熱心網友回復：

這是您正在尋找的解決方案，隨時更改影像/類；

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>

標籤：javascript html css 图片 位置

上一篇：我正在嘗試從影像陣列中顯示影像-javascript

下一篇：無法加載隨機影像