Question

我的滑块自动向左移动，一旦到达它，移动第一个滑块，然后重复。

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

我该怎么做？

这是我的Fiddle。

这是css

#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);

-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;

-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    }

由于我在javascript中没有任何想法，我无法采取任何措施。

Answer 1

您当前的动画关键帧：

@-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％之间来回。

显示2张以上的幻灯片：

在幻灯片中添加类，以便能够隐藏和显示它们并创建这些关键帧：

@-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的位置，因为你有一个固定的宽度我只使用position: relative;并添加动画关键帧（不要忘记其他前缀）

#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;   
}

the finished Fiddle

如何使滑块交替左右移动

1 个答案: