如何使一个图片库的图像堆栈(对图像点击)?

Question

我有一个三张图片叠在一起的堆栈。我希望这些图像是可点击的这样每次我点击堆栈顶部的图像，下面的图像就会在顶部。到目前为止，我可以管理它，每个图像是可点击的，但效果不是我想要的。我是否必须在点击时添加一个类(具有高z指数)?或者我怎么解这个?谢谢你的帮助!

下面是我的代码:

<script>
const images = document.querySelectorAll('.img-stack img');
images.forEach(function (btn) {
btn.onclick = function () {
this.style.zIndex = "100";
}
});
</script>

main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
main .img-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 800px;
height: 400px;
}
main .img-container .text-container {
width: 500px;
padding: 120px;
}
main .img-container .img-stack {
position: relative;
width: 300px;
height: 400px;
}
main .img-container .img-stack img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
main .img-container .img-stack img:nth-child(1) {
width: 300px;
height: 400px;
background-color: skyblue;
transform: rotate(-6deg);
}
main .img-container .img-stack img:nth-child(2) {
width: 300px;
height: 400px;
background-color: coral;
transform: rotate(9deg);
}
main .img-container .img-stack img:nth-child(3) {
width: 300px;
height: 400px;
background-color: crimson;
transform: rotate(3deg);
}

<main>
<div class="img-container">
<div class="text-container">
<h1>Lorem Ispum</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="img-stack">
<img>
<img>
<img>
</div>
</div>
</main>

Answer 1

你可以这样做:

问题

基本上，我们想旋转图像。

1. 显示在顶部的图像将被放置在底部

2. 要放在顶部的中间图像

3. 重复。

让我们澄清一下DOM img元素是如何呈现的:

img元素是绝对定位的。所以:第一个img元素(在html中)将出现在底部。
中间的第二个。
上面第三个。

你可以想象把你手中的牌一张一张地放在桌子上。它会以同样的方式工作。你先发牌/放牌的那张牌将最后出现在桌子上。

解决方案

我冒昧地给你提供了id的img元素。我认为这更有意义因为我们想要旋转它们我们不希望第一张图像总是具有相同的颜色。相反，我们希望每个图像都是不同的，并且每个图像都有自己的颜色，不会因其位置而改变。因此，在这种情况下，提供id是有帮助的。

到目前为止，如果你理解了所有这些，解决方案就很简单了。在onClick()中，我们只需:

1. 抓取最后一个(在我们的html中)img标签，它呈现在顶部和
2. 我们把它放在(在我们的html中)第一个出现在底部的preend ()

更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend

注:你已经很接近了，z-index方法也可以，但通常我认为过多使用z-index会很混乱。
很酷的效果，顺便说一下。

如果你还有问题，请告诉我。:)

const imageNodes = document.querySelectorAll('.img-stack img');
const imageStack = document.querySelector('.img-stack');
imageNodes.forEach(btn => {
btn.onclick =   function() {
let image = document.querySelector('img:last-child');
imageStack.prepend(image);   
}
});

main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
main .img-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 800px;
height: 400px;
}
main .img-container .text-container {
width: 500px;
padding: 120px;
}
main .img-container .img-stack {
position: relative;
width: 300px;
height: 400px;
}
main .img-container .img-stack img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
main .img-container .img-stack #img1 {
width: 300px;
height: 400px;
background-color: skyblue;
transform: rotate(-6deg);
}
main .img-container .img-stack #img2 {
width: 300px;
height: 400px;
background-color: coral;
transform: rotate(9deg);
}
main .img-container .img-stack #img3 {
width: 300px;
height: 400px;
background-color: crimson;
transform: rotate(3deg);
}

<main>
<div class="img-container">
<div class="text-container">
<h1>Lorem Ispum</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="img-stack">
<img id="img1">
<img id="img2">
<img id="img3">
</div>
</div>
</main>

Answer 2

根据我们的交流，通过评论区:

我想确认一下我是否正确理解了你的问题。你有三张图片，一张叠在另一张上面。你想要的是当在堆栈顶部的图像被点击时，将该图像移动到堆栈底部，并在顶部显示位于刚刚移动到底部的图像下方的图像。这是正确的吗?——acarlstein

@acarlstein这是正确的。我的想法是通过在顶部图像中添加类(或id)来解决它，但我被卡住了。——Sveninho

这是使用纯JavaScript的一种方法。我会试着看看我是否有时间添加一个CSS的方式。

let stackImages = document.getElementsByClassName("stack-image");
document.getElementById("btn-method-1").addEventListener("click", (e) => {
if (stackImages.length < 1) return; 
let frontImage = stackImages[stackImages.length - 1];
let backImage = stackImages[0];
backImage.before(frontImage);
});

.container {
position: relative;
}
.stack-image {
position: absolute;
}

<button id="btn-method-1">Swap Image Position</button>
<div class="container">
<img class="stack-image" src="https://fakeimg.pl/350x200/?text=ImageC">
<img class="stack-image" src="https://fakeimg.pl/350x200/?text=ImageB">
<img class="stack-image" src="https://fakeimg.pl/350x200/?text=ImageA">
<!-- bottom image is the one that will be always displayed to the user -->
</div>

通过改变CSS zIndex:

let stackImages = document.getElementsByClassName("stack-image");
let len = stackImages.length;
let zIndexes = [...Array(len)].map((_,i) => i++);
function swapImages() {
zIndexes.push(zIndexes.shift());
for (let i = 0; i < len; ++i){
stackImages[i].style.zIndex = zIndexes[i]; 
}
}
document.getElementById("btn-method-1").addEventListener("click", (e) => {
swapImages();
});

.container {
position: relative;
}
.stack-image {
position: absolute;
}

<button id="btn-method-1">Swap Image Position via changing zIndex</button>
<div class="container">
<img class="stack-image" src="https://fakeimg.pl/350x200/?text=ImageC">
<img class="stack-image" src="https://fakeimg.pl/350x200/?text=ImageB">
<img class="stack-image" src="https://fakeimg.pl/350x200/?text=ImageA">
<!-- bottom image is the one that will be always displayed to the user -->
</div>