Question

现在有人能给我一个关于如何减慢幻灯片显示时间的提示吗？我希望所有幻灯片的显示持续时间与页面加载时的第一张幻灯片相同，但在第一张幻灯片后，它们会很快开始循环播放。

.wavsplashslider {
    position: relative;
    top: 0;
    left: 0;
    width: 824px;
    height:392px;
    overflow:hidden;
}
.wavsplashslide {
    width: 824px;
    height:392px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: slideshow 12s linear 0s infinite;
    -moz-animation: slideshow 12s linear 0s infinite;
    -ms-animation: slideshow 12s linear 0s infinite;
    -o-animation: slideshow 12s linear 0s infinite;
    animation: slideshow 12s linear 0s infinite;
}
.wavsplashslide:nth-child(2) {
    -webkit-animation: slideshow 12s linear 4s infinite;
    -moz-animation: slideshow 12s linear 4s infinite;
    -ms-animation: slideshow 12s linear 4s infinite;
    -o-animation: slideshow 12s linear 4s infinite;
    animation: slideshow 12s linear 4s infinite;
}
.wavsplashslide:nth-child(3) {
    -webkit-animation: slideshow 12s linear 8s infinite;
    -moz-animation: slideshow 12s linear 8s infinite;
    -ms-animation: slideshow 12s linear 8s infinite;
    -o-animation: slideshow 12s linear 8s infinite;
    animation: slideshow 12s linear 8s infinite;
}
@-webkit-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@-moz-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@-ms-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@-o-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}

<div class="wavsplashslider">

    <div class="wavsplashslide">
      <a href="http://stackoverflow.com">
        <img src="http://lorempixel.com/824/392"  />
      </a>
    </div>


    <div class="wavsplashslide">
      <a href="http://stackoverflow.com/questions">
        <img src="http://lorempixel.com/824/392" />
      </a>
    </div>

    <div class="wavsplashslide">
      <a href="http://stackoverflow.com/tags">
        <img src="http://lorempixel.com/824/392" />
      </a>
    </div>

</div>

Answer 1

我真的建议你删除所有这些并使用UnSlider

如果你来这里学习this link对你来说是完美的

Answer 2

您应该首先根据（完全）全局支持忘记前缀：唯一需要的前缀是-webkit-（来源：caniuse.com）。您的代码将更易读且易于维护。

要回答您的问题：您需要一个每张幻灯片的关键帧，以便每隔 n 秒设置一次正确的转换。这样，每张幻灯片都会跟随自己的动画，从0％开始，做到100％，然后结束动画。

让我们看看这一点

.wavsplashslide:nth-child(1) {
    -webkit-animation: firstcycle 12s linear infinite;
    animation: firstcycle 12s linear infinite;
}

.wavsplashslide:nth-child(2) {
    -webkit-animation: secondcycle 12s linear infinite;
    animation: secondcycle 12s linear infinite;
}

.wavsplashslide:nth-child(3) {
    -webkit-animation: thirdcycle 12s linear infinite;
    animation: thirdcycle 12s linear infinite;
}

@keyframes firstcycle {
    // 0th → 3rd second : nothing happens, image is displayed
    0%, 8.3333% { left: 0; }
    25% { left: 0; opacity: 1; }

    // 3rd → 4th second : the first image will start moving
    33.3333% { left: 824px; opacity: 0; }

    // then we go back in position
    34% { left: -824px; opacity: 0; }

    // 11th → 12th second : we start replacing the third image by the first one
    91.6667% { left: -824px; opacity: 0; }
    100% { left: 0; opacity: 1; }
}

@keyframes secondcycle {
    // 0th → 3rd second : nothing happens, first image is displayed
    0%, 25% { left: -824px; }

    // 3rd → 4th second : the second image is replacing the first one
    33.3333% { left: 0; opacity: 1; }

    // this display lasts until the 7th second
    58.3333% { left: 0; opacity: 1; }

    // 7th → 8th second: the second image start moving
    66.6667% { left: 824px; opacity: 0; }

    // then we go back in position
    67%, 100% { left: -824px; opacity: 0; }
}

@keyframes thirdcycle {
    // 0th → 7th second : nothing happens, second image is displayed
    0%, 58.3333% { left: -824px; }

    // 7th → 8th second: the third image is replacing the second one
    66.6667% { left: 0; opacity: 1;}

    // this display lasts until the 11th second
    91.6667% { left: 0; opacity: 1; }

    // then we can stay here for a while: firstcycle is coming back
    100% { left: 824px; opacity: 0; }
}

这是see that in action and get the whole CSS

的小提琴

更改CSS图像幻灯片速度

2 个答案: