时间戳

首页 > 解决方案 > 如何正确更改此代码？

css - 如何正确更改此代码？

问题描述

这是我第一次想使用滑动图像，我在 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>

提前致谢！

标签： csssliderslideshow

解决方案

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，你确保你也有其余的。

推荐阅读