Question

这是我第一次要使用滑动图像，并且我在Codepen上找到了完美的滑动图像，但是无法管理只有2或3个图像滑动。无法找到如何正确设置时间。如果我只需要2或3张图像在每张图像上滑动4秒钟，它是如何工作的？

@import url('https://fonts.googleapis.com/css?family=Bubblegum+Sans|Ubuntu');
html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Bubblegum Sans', cursive;
}

slider {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #1f1f1f;
    overflow: hidden;
    position: absolute;
}

slider > * {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #1f1f1f;
    animation: slide 12s infinite;
    overflow: hidden;
}

slide:nth-child(1) {
    left: 0;
    z-index: 9;
    animation-delay: -1s;
    background-image: url(https://preview.ibb.co/fm57uG/img_1.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(2) {
    animation-delay: 2s;
    background-image: url(https://preview.ibb.co/kkT5gw/img_2.jpg);
    z-index: 8;
    background-size: cover;
    background-position: center;
}

slide:nth-child(3) {
    animation-delay: 5s;
    background-image: url(https://preview.ibb.co/dVT5gw/img_3.jpg);
    background-size: cover;
    background-position: center;
    z-index: 7;
}

slide:nth-child(4) {
    left: 0%;
    animation-delay: 8s;
    background-image: url(https://preview.ibb.co/m7FU8b/img_4.jpg);
    background-size: cover;
    background-position: center;
    z-index: 6;
}

slide p {
    font-size: 70px;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: #fff;
}

@keyframes slide {
    0% {
        left: 100%;
        width: 100%;
    }
    5% {
        left: 0%;
    }
    25% {
        left: 0%;
    }
    30% {
        left: -100%;
        width: 100%;
    }
    30.001% {
        left: -100%;
        width: 0%;
    }
    100% {
        left: 100%;
        width: 0%;
    }
}

<slider>
        <slide>
            <p>Slide 1</p>
        </slide>
        <slide>
            <p>Slide 2</p>
        </slide>
        <slide>
            <p>Slide 3</p>
        </slide>
        <slide>
            <p>Slide 4</p>
        </slide>
    </slider>

谢谢！

Answer 1

3张幻灯片的示例：

HTML

<slider>
        <slide>
            <p>Slide 1</p>
        </slide>
        <slide>
            <p>Slide 2</p>
        </slide>
        <slide>
            <p>Slide 3</p>
        </slide>
    </slider>

CSS

slide:nth-child(1) {
    left: 0;
    z-index: 9;
    animation-delay: -1s;
    background-image: url(https://preview.ibb.co/fm57uG/img_1.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(2) {
    animation-delay: 3s;
    background-image: url(https://preview.ibb.co/kkT5gw/img_2.jpg);
    z-index: 8;
    background-size: cover;
    background-position: center;
}

slide:nth-child(3) {
    animation-delay: 7s;
    background-image: url(https://preview.ibb.co/dVT5gw/img_3.jpg);
    background-size: cover;
    background-position: center;
    z-index: 7;
}

诀窍是遵循动画延迟。第一张幻灯片立即开始播放（-1s），第二张幻灯片增加4秒，以便获得（3s），第三张幻灯片再次增加4s（7s），依此类推。如果需要2张幻灯片，请从HTML中删除第三张幻灯片，然后从CSS中删除第三个孩子。

注意：我只为幻灯片子代放置了CSS，请确保您也拥有其余的子代。

如何正确更改此代码？

1 个答案: