Question

我的网站www.losgazquez.com有一个基于Bootsrap的幻灯片作为背景，但它有两个问题：

当第一个循环结束并返回第一个图像时，此图像仅在几秒钟内可见，而不是在10秒内可见，这是理论上我建立的。
幻灯片显示一段时间后会变得有趣：有时它会变成空白，图像会重叠。

我希望你能给我一些建议。如果您需要更多详细信息，请告诉我们。感谢。

.cb-slideshow,

.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1000;
}

.cb-slideshow li {list-style: none;}

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 80s linear infinite 0s;
    -moz-animation: imageAnimation 80s linear infinite 0s;
    -o-animation: imageAnimation 80s linear infinite 0s;
    -ms-animation: imageAnimation 80s linear infinite 0s;
    animation: imageAnimation 80s linear infinite 0s;
}

.cb-slideshow li div {
  position: absolute;
  top: 200px;
  left: 150px;
    z-index: 1000;
    width: 100%;
    text-align: left;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 80s linear infinite 0s;
    -moz-animation: titleAnimation 80s linear infinite 0s;
    -o-animation: titleAnimation 80s linear infinite 0s;
    -ms-animation: titleAnimation 80s linear infinite 0s;
    animation: titleAnimation 46s linear infinite 0s;
}

.cb-slideshow li div h3 {
    font-size: 50px;
    padding: 0;
    line-height: 30px;
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/background-images/13.jpg)
}

.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/background-images/1.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}

.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/background-images/2.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}

.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/background-images/28.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}

.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/background-images/4.jpg);
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}

.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/background-images/5.jpg);
    -webkit-animation-delay: 50s;
    -moz-animation-delay: 50s;
    -o-animation-delay: 50s;
    -ms-animation-delay: 50s;
    animation-delay: 50s;
}

.cb-slideshow li:nth-child(7) span {
    background-image: url(../images/background-images/6.jpg);
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}

.cb-slideshow li:nth-child(8) span {
    background-image: url(../images/background-images/27.jpg);
    -webkit-animation-delay: 70s;
    -moz-animation-delay: 70s;
    -o-animation-delay: 70s;
    -ms-animation-delay: 70s;
    animation-delay: 70s;
}

.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}

.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}

.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}

.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}

.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 50s;
    -moz-animation-delay: 50s;
    -o-animation-delay: 50s;
    -ms-animation-delay: 50s;
    animation-delay: 50s;
}

.cb-slideshow li:nth-child(7) span {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}

.cb-slideshow li:nth-child(8) span {
    -webkit-animation-delay: 70s;
    -moz-animation-delay: 70s;
    -o-animation-delay: 70s;
    -ms-animation-delay: 70s;
    animation-delay: 70s;
}

/* Animation for the slideshow images */

@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    20% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    20% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    20% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    20% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    4% { opacity: 1;
         animation-timing-function: ease-out; }
    20% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

一段时间后，背景幻灯片不起作用

0 个答案: