Javascript 如何使滑块交替左右移动

我使用的滑块会自动从左侧移动，一旦到达，它会移动第一个滑块，然后重复

我想做的就是让滑块从右向左，然后从左向右交替

我该怎么做

这是我的名片

这是css

---

因为我对javascript没有任何概念，所以我无法给出任何步骤

当前动画关键帧：

@-webkit-keyframes slider {
    0%, 20%, 100%   { left: 0 }
    25%, 45%        { left: -100% }
    50%, 70%        { left: -200% }
    75%, 95%        { left: -300% }
}

它从0%到-100%到-200%-300%，然后返回到0

您可以将其更改为以下内容：

@-webkit-keyframes slider {
    0%, 20%, 100%   { left: 0 }
    25%, 45%        { left: -100% }
    50%, 70%        { left: 0 }
    75%, 95%        { left: -100% }
}

在这里，它将在0和-100%之间来回移动

显示两张以上的幻灯片：

将类添加到幻灯片中，以便能够隐藏和显示它们，并为此创建了以下关键帧：

@-webkit-keyframes slider1 {
    0%, 20%, 100%   { opacity: 1; display: block; visibility: visible; }
    25%, 45%        { opacity: 0; display: none; visibility: hidden; }
    50%, 70%        { opacity: 0; display: none; visibility: hidden; }
    75%, 95%        { opacity: 0; display: none; visibility: hidden; }
}

@-webkit-keyframes slider2 {
    0%, 20%, 100%   { opacity: 0; display: none; visibility: hidden; }
    25%, 45%        { opacity: 1; display: block; visibility: visible; }
    50%, 70%        { opacity: 0; display: none; visibility: hidden; }
    75%, 95%        { opacity: 0; display: none; visibility: hidden; }
}

@-webkit-keyframes slider3 {
    0%, 20%, 100%   { opacity: 0; display: none; visibility: hidden; }
    25%, 45%        { opacity: 0; display: none; visibility: hidden; }
    50%, 70%        { opacity: 1; display: block; visibility: visible; }
    75%, 95%        { opacity: 0; display: none; visibility: hidden; }
}

@-webkit-keyframes slider4 {
    0%, 20%, 100%   { opacity: 0; display: none; visibility: hidden; }
    25%, 45%        { opacity: 0; display: none; visibility: hidden; }
    50%, 70%        { opacity: 0; display: none; visibility: hidden; }
    75%, 95%        { opacity: 1; display: block; visibility: visible; }
}

现在您只需要将幻灯片3放置在1处，将幻灯片4放置在2处，因为您有一个固定的宽度，我刚才使用了位置：相对；并添加动画关键帧不要忘记其他前缀

#slideshow .slide_1 {
    -webkit-animation: slider1 32s infinite; 
}
#slideshow .slide_2 {
    -webkit-animation: slider2 32s infinite; 
}
#slideshow .slide_3 {
    position: relative;
    left: -1280px;
    -webkit-animation: slider3 32s infinite;   
}
#slideshow .slide_4 {
    position: relative;
    left: -1280px;
    -webkit-animation: slider4 32s infinite;   
}

---

我得到了它。。但在你更新的小提琴中，只有两幅图像在重复。我怎样才能让5张图像像这样移动呢？在这里，它与4张幻灯片一起工作：我将幻灯片1和3、2和4重叠，以便它们交替并改变它们的可见性，从css第351行开始，但是宽度3、5或更多幻灯片要复杂得多。谢谢。成功了。我可以知道你做了什么改变吗。请你在回答中更新一下好吗。

#slideshow .slide_1 {
    -webkit-animation: slider1 32s infinite; 
}
#slideshow .slide_2 {
    -webkit-animation: slider2 32s infinite; 
}
#slideshow .slide_3 {
    position: relative;
    left: -1280px;
    -webkit-animation: slider3 32s infinite;   
}
#slideshow .slide_4 {
    position: relative;
    left: -1280px;
    -webkit-animation: slider4 32s infinite;   
}