Question

我有一个视差JavaScript代码，包含5个部分（带有类背景），每个部分包含1个图像+带有内容包装的文本。

他们实际上有以下z-index ::

.background:nth-child(1) { z-index: 5; }

.background:nth-child(2) { z-index: 4; }

.background:nth-child(3) { z-index: 3; }

.background:nth-child(4) { z-index: 2; }

.background:nth-child(5) { z-index: 1; }

var currentSlideNumber = 0;

（会告诉我哪张幻灯片，所以我可以在左侧菜单中进行转换，并使用滚动。）

我也有，一个左菜单固定选择我想去哪里而不必滚动这些部分，我的问题是我不能让较高的部分显示在较低的部分后（我我在.background:nth-child(1)，我无法让它显示.background:nth-child(5)，但我在{1}}位置更高，只是它位于它后面。

任何想法我应该如何编码，以便我可以在（例如）第5个比较第一个得到更高z-index但是如果我在第一个回复点击z-index将返回正常。

我希望它能够在左侧菜单中调用z-index时显示幻灯片。

任何想法我该怎么做？

Answer 1

通过单击菜单中的选项显示幻灯片时，可以将slide-active课程应用于相应的幻灯片。您还需要从之前的任何活动幻灯片中删除此类：

document.querySelector('.slide-active').classList.remove('slide-active')

// Assumes currentSlideNumber is an array index, ie 0 - (n - 1). Otherwise use currentSlideNumber - 1
document.querySelectorAll('.background')[currentSlideNumber].classList.add('slide-active')

CSS：

.slide-active {
    z-index: 999
}

通过这种方式，您可以从每张幻灯片中删除唯一的z-index，并且只需要DOM排序，以便默认显示顶部幻灯片（即将其放在标记的最后）。

更改相对于所需部分的单击按钮的z-index

1 个答案: