带z索引的JavaScript和CSS旋转/幻灯片放映

我需要用纯JavaScript混合CSS制作一个旋转木马/幻灯片，在图像中一个接一个地无缝循环

我似乎无法让任何代码正常工作。我试过几种方法，但都不行。它必须使用z-index，而不是使用flex

这是我第三次尝试编写此代码。似乎无法理解逻辑。它必须有导航按钮才能在图像之间切换。有人能帮我吗

  const getHeader = document.querySelector('.wp-custom-header');
  const getImages = document.querySelectorAll('.wp-custom-header img');
  const computeImages = function () {
    getImages.forEach((img, index) => {
      if (index > 0) img.classList.add('out');
    });
  };
  computeImages();
  let counter = 0;
  let reinit = false;
  // getHeader.classList.add('transformSlide');
  const slideShowTimer = setInterval(() => {
    if (counter > 0 && counter < getImages.length - 1) {
      getImages[counter + 1].classList.add('transform-slide');
      getImages[counter + 1].classList.add('onqueue-current');
      getImages[counter + 1].classList.remove('out');
    } else if (counter === 0 && reinit === false) {
      getImages[counter + 1].classList.add('transform-slide');
      getImages[counter + 1].classList.add('onqueue-current');
      getImages[counter + 1].classList.remove('out');
    } else if (counter === 0 && reinit === true) {
      getImages[counter].classList.add('transform-slide');
      getImages[counter].classList.add('onqueue-current');
      getImages[counter].classList.remove('out');
      getImages[getImages.length - 1].classList.add('out');
      getImages[getImages.length - 1].classList.remove('transform-slide');
      getImages[getImages.length - 1].classList.remove('onqueue-current');
    }
    counter++;
  }, 2000);

  getHeader.addEventListener('transitionend', () => {
    if (counter >= 1) {
      if (!reinit) {
        getImages[counter - 1].classList.remove('transform-slide');
        getImages[counter - 1].classList.remove('onqueue-current');
        getImages[counter - 1].classList.add('out');
      } else {
        getImages[counter].classList.remove('transform-slide');
        getImages[counter].classList.remove('onqueue-current');
        getImages[counter].classList.add('out');
      }
    }
    if (counter >= getImages.length - 1) {
      console.log(counter);
      counter = 0;
      reinit = true;
    }
  });

---

我冒昧地修改了你的代码。我已经将您的代码修改为更小的函数，并添加了循环机制。现在，无论旋转木马中有多少张幻灯片，按钮都会无限循环

我添加了“上一步”和“下一步”按钮。将鼠标悬停在图像上将停止自动滑动功能的运行，以便您可以控制转到下一张幻灯片和上一张幻灯片。无论何时停止悬停，旋转木马都会继续

希望这就是你要找的

const-header=document.querySelector（'.wp-custom-header'）；
const images=document.querySelectorAll（'.wp-custom-header-img'）；
const buttons=document.queryselectoral（'.wp自定义标题按钮'）；
让activeSlideIndex=0；
设区间=null；
const updateCarousel=（）=>{
images.forEach（（图像，索引）=>{
如果（索引===activeSlideIndex）{
image.classList.add（'active'）；
}else if（image.classList.contains（'active'））{
image.classList.remove（'active'）；
}
});
};
常量nextSlide=（）=>{
如果（activeSlideIndex+1{
如果（activeSlideIndex-1>=0）{
activeSlideIndex--；
}否则{
activeSlideIndex=images.length-1；
}
};
常量startInterval=（）=>setInterval（（）=>{
nextSlide（）；
updateCarousel（）；
}, 2000);
常数停止间隔=（）=>{
间隔时间；
间隔=空；
};
间隔=startInterval（）；
常数控制={
“prev”：prev幻灯片，
“下一步”：下一步滑动
};
header.addEventListener（'mouseenter'，（）=>{
如果（间隔！==null）{
停止间隔（）；
}
});
header.addEventListener（'mouseleave'，（）=>{
间隔=startInterval（）；
});
按钮。forEach（按钮=>{
addEventListener（'click'，event=>{
常量值=event.target.value；
常量动作=控件[值]；
动作（）；
updateCarousel（）；
});
});
.wp自定义标题{
位置：相对位置；
}
.wp自定义标题图像{
显示：块；
宽度：100%；
高度：250px；
}
.wp自定义标题图像img{
位置：绝对位置；
显示：块；
宽度：100%；
身高：100%；
-o-对象配合：盖；
对象匹配：覆盖；
不透明度：0；
将改变：不透明度；
过渡：不透明度250ms缓进缓出；
z指数：0；
}
.wp自定义标题图像img.active{
z指数：1；
不透明度：1；
}
.wp自定义标题按钮{
位置：绝对位置；
最高：50%；
边框：1px实心#d0；
背景色：#f0；
边界半径：50%；
宽度：50px；
高度：50px；
光标：指针；
转换：翻译（0，-50%）；
z指数：2；
}
.wp自定义标题按钮[value=“prev”]{
左：15px；
}
.wp自定义标题按钮[value=“next”]{
右：15px；
}

上
下一个
嘿，如果您正在寻找一个更简单的实现，请查看这个-我一周前创建了这个，可能会有所帮助。另外，对于更简单的实现，请检查一下——它必须使用z-index，而不是使用flex，您能解释一下为什么这是一个限制或您的意思吗？他们做的事情都很不一样。@EmielZuurbier这是我英语的问题，我很抱歉，这更像是带有导航按钮的自动播放幻灯片。有人要求我对津德克斯那样做。原因是，正如我被告知的那样，它消耗的资源更少。不能用另一种方式来做。@LakshyaThakur谢谢你的信息。但它必须自动无缝地切换到最后一张图像之后的第一张图像。向前滑动，而不是转位回到开头。代码很棒。非常有效。但我要的是幻灯片效果，而不是不透明效果\如果向我提出请求的人接受了我的回答，我将接受答案。我假设这是您想要的，因为您明确表示您需要使用
z-index
（表示重叠结构）而不是
display:flex
（表示行或列）的解决方案。否则，我建议使用现有的旋转木马库，如或，它具有您所要求的功能。
  <div id="wp-custom-header" class="wp-custom-header">    
    <img alt="" src="./image01.svg" />
    <img alt="" src="./image02.svg" />
    <img alt="" src="./image03.svg" />
    <img alt="" src="./image04.svg" />
    <img alt="" src="./image05.svg" />
    <img alt="" src="./image06.svg" />
  </div>

.wp-custom-header {
  position: relative;
  display: block;
  width: 100%;
  height: var(--header-size);
}

.wp-custom-header img {
  position: absolute;
  display: block;
  min-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: var(--slide-transform) ease-in-out;
}
.wp-custom-header img.out {
  /* left: -450px; */
  z-index: 0;
  transform: translateX(100%);
}
.wp-custom-header img.onqueue-next {
  z-index: 0;
  left: 0px;
}
.wp-custom-header img.onqueue-current {
  z-index: 1;
  transform: translateX(0px);
}
.transform-slide {
  transition: var(--slide-transform) ease-in-out;
}