更改幻灯片速度CSS

时间：2018-12-16 22:18:08

标签： css slideshow

我目前在我的网站上有一个幻灯片放映，但是幻灯片放得太快了，我想放慢一点，但是我不知道该怎么做，每次我尝试改变某些东西时我都会毁了一切。

我希望每张幻灯片能得到5/6秒。 如果有人可以帮助我，我将非常感激。

import MyPackage 
from MyPackage import xyz

.topSlider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute; }

  .topSlider span {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center; }

  .topSlider .slide {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 12s infinite;
    animation: slide 10s infinite;
    overflow: hidden; }
  .topSlider .slide:nth-child(2) {
    left: 0%;
    -webkit-animation-delay: -1s;
    animation-delay: -0.5s;
    background-color: black;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(3) {
    left: 100%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    background-color: red;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(4) {
    left: 100%;
    -webkit-animation-delay: 5s;
    animation-delay: 4.5s;
    background-color: white;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(5) {
    left: 100%;
    -webkit-animation-delay: 8s;
    animation-delay: 7s;
    background-color: blue;
    background-size: cover;
    background-position: center; }
  .topSlider p {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: white; }

@-webkit-keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

2 个答案:

答案 0 :(得分：1)

您可以更改秒数

    -webkit-animation-delay: -1s;
    animation-delay: -0.5s;

每个孩子。

，但还要确保主滑块时间与滑块子级中的秒数间隔成比例。看看下面的示例，并将其与您的示例进行比较，以了解我的意思。

示例中的主滑块时间：

-webkit-animation: slide 12s infinite;
animation: slide 10s infinite;


.topSlider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute; }

  .topSlider span {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center; }

  .topSlider .slide {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 20s infinite;
    animation: slide 20s infinite;
    overflow: hidden; }
  .topSlider .slide:nth-child(2) {
    left: 0%;
    -webkit-animation-delay: -1s;
    animation-delay: -0.5s;
    background-color: black;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(3) {
    left: 100%;
    -webkit-animation-delay: 5s;
    animation-delay: 4.5s;
    background-color: red;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(4) {
    left: 100%;
    -webkit-animation-delay: 10s;
    animation-delay: 9.0s;
    background-color: white;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(5) {
    left: 100%;
    -webkit-animation-delay: 15s;
    animation-delay: 13.5s;
    background-color: blue;
    background-size: cover;
    background-position: center; }
  .topSlider p {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: white; }

@-webkit-keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }
    <div class="topSlider">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>

答案 1 :(得分：0)

您可以更改-webkit-animation和animation属性（“ 2s”）的持续时间部分：

 -webkit-animation: slide 2s infinite;
animation: slide 2s infinite;


.topSlider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute; }

  .topSlider span {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center; }

  .topSlider .slide {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 6s infinite;
    animation: slide 6s infinite;
    overflow: hidden; }
  .topSlider .slide:nth-child(2) {
    left: 0%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: black;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(3) {
    left: 100%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: red;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(4) {
    left: 100%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: white;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(5) {
    left: 100%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: blue;
    background-size: cover;
    background-position: center; }
  .topSlider p {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: white; }

@-webkit-keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }
<div class="topSlider">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>

相关问题
最新问题