旋转木马javascript

如何使第二个图像（底部）保持在原位，直到第一个图像（活动）完全完成

转换

就位？然后在不重新排列数组的情况下再次启动循环？我不知道这是不是完全错了，或者我错过了什么，我已经试了一段时间了！请解释您的评论/答案，谢谢您的帮助

var slideIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var slideShowSlide=document.querySelector（'.slideshow\uu slide'）；
var slideBgFigure=Array.from（slideShowSlide.children）；
var slideWidth=slideBgFigure[0].getBoundingClientRect（）.width；
对于（i=0；islideBgFigure.length）{
slideIndex=1；
}
slideBgFigure[slideIndex-1].style.transform=“translateX（0px）”；
设置超时（旋转木马，3000）；
};
.slideshow\uu幻灯片{
溢出：隐藏；
高度：359px；
位置：相对位置；
}
.幻灯片{
位置：绝对位置；
宽度：100%；
保证金：0；
颜色：#fff；
背景：#333；
溢出x：隐藏；
-webkit盒阴影：插入0 1px#f0；
框阴影：插入0 1px#f0；
过渡：所有1.5s轻松；
}
.幻灯片{
显示：块；
}
我不知道为什么这个问题得到了两张反对票？也许这浪费了人们的时间？这也浪费了我整个上午，该死的

这可能是OP想要得到的。我用CSS动画来控制动画而不是javascript，用setInterval来控制setTimeout。我使用javascript控制类当前的幻灯片。但事实证明，我身上最棘手、最耗时的部分不是动画，而是z-index。我打错了字，也把事情搞砸了。妈的，花了很多时间做这个看起来很容易的问题


编辑：更简单的代码，使用CSS转换而不是动画，javascript代码只是置换类。
var slideShowSlide=document.querySelector（'.slideshow\uu slide'）；
var slideBgFigure=Array.from（slideShowSlide.children）；
函数置换类名称（数组）{
var tmp=array[0]。类名；
for（设i=0；i
.slideshow\uu幻灯片{
溢出：隐藏；
高度：359px；
位置：相对位置；
}
.幻灯片{
位置：绝对位置；
宽度：100%；
保证金：0；
颜色：#fff；
背景：#333；
溢出x：隐藏；
-webkit盒阴影：插入0 1px#f0；
框阴影：插入0 1px#f0；
}
.幻灯片{
显示：块；
不透明度：.3；
}
.幻灯片{
过渡：1.5s轻松过渡；
}
.slide\uu bg.slide-out{
转化：translateX（-100%）；
z指数：0；
}
.slide\uu bg.slide-in{
变换：translateX（0）；
z指数：2；
}
.幻灯片（背景）中间{
变换：translateX（0）；
z指数：1；
}

为什么投反对票？？？你能解释一下吗？我也想知道：）这么有趣的问题。真的很糟糕，我还在学习，我有一个问题？谢谢@HuI不知道，我自己也喜欢这个问题。我可以理解你想要什么，提供完整的可运行代码不会太长。我还想知道为什么人们否决了它，却没有解释：））。