文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >纯CSS3幻灯片如何重复最后4张幻灯片？

问纯CSS3幻灯片如何重复最后4张幻灯片？
EN

Stack Overflow用户
提问于 2015-11-06 16:40:53
回答 2查看 226关注 0票数 2

我找到了一个脚本，即"具有图像平移和缩放效果的纯CSS / CSS3滑行“。

这个问题在于它重复了最后4张幻灯片。有人能告诉我为什么和如何解决这个问题吗？

我的第一把小提琴，证明了这个问题。

我的第二个，证明这个问题。

HTML：

代码语言：javascript
复制
<div class="pic-wrapper lejatszokep">
    <figure class="pic-1"></figure>
    <figure class="pic-2"></figure>
    <figure class="pic-3"></figure>
    <figure class="pic-4"></figure>
    <figure class="pic-5"></figure>
    <figure class="pic-6"></figure>
    <figure class="pic-7"></figure>
    <figure class="pic-8"></figure>
    <figure class="pic-9"></figure>
    <figure class="pic-10"></figure>
    <figure class="pic-11"></figure>
    <figure class="pic-12"></figure>
    <figure class="pic-13"></figure>
    <figure class="pic-14"></figure>
    <figure class="pic-15"></figure>
    <figure class="pic-16"></figure>
    <figure class="pic-17"></figure>
    <figure class="pic-18"></figure>
    <figure class="pic-19"></figure>
</div>

CSS3：

代码语言：javascript
复制
    .pic-wrapper {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        position: absolute;
        width: 259px;
        height: 200px;
        overflow: hidden;
    }
    figure {
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 258px;
      height: 200px;
      opacity: 0;
      /*animation*/

      animation: slideShow 24s linear infinite;
      -o-animation: slideShow 24s linear infinite;
      -moz-animation: slideShow 24s linear infinite;
      -webkit-animation: slideShow 24s linear infinite;

/*suggestion by marczking to make the code shorter: */

      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    .pic-1 {
        opacity:1;
      background: url(http://88t.eu/Pictures/sh/1/intr_01.jpg) no-repeat center center;

    }
    .pic-2 {
      animation-delay: 6s;
      -o-animation-delay: 6s;
      -moz--animation-delay: 6s;
      -webkit-animation-delay: 6s;
      background: url(http://88t.eu/Pictures/sh/1/intr_02.jpg) no-repeat center center;
    }
    .pic-3 {
      animation-delay: 12s;
      -o-animation-delay: 12s;
      -moz--animation-delay: 12s;
      -webkit-animation-delay: 12s;
      background: url(http://88t.eu/Pictures/sh/1/intr_03.jpg) no-repeat center center;
    }
    .pic-4 {
      animation-delay: 18s;
      -o-animation-delay: 18s;
      -moz--animation-delay: 18s;
      -webkit-animation-delay: 18s;
      background: url(http://88t.eu/Pictures/sh/1/intr_04.jpg) no-repeat center center;
    }
    .pic-5 {
      animation-delay: 24s;
      -o-animation-delay: 24s;
      -moz--animation-delay: 24s;
      -webkit-animation-delay: 24s;
      background: url(http://88t.eu/Pictures/sh/1/intr_05.jpg) no-repeat center center;
    }
    .pic-6 {
      animation-delay: 30s;
      -o-animation-delay: 30s;
      -moz--animation-delay: 30s;
      -webkit-animation-delay: 30s;
      background: url(http://88t.eu/Pictures/sh/1/intr_06.jpg) no-repeat center center;
    }
    .pic-7 {
      animation-delay: 36s;
      -o-animation-delay: 36s;
      -moz--animation-delay: 36s;
      -webkit-animation-delay: 36s;
      background: url(http://88t.eu/Pictures/sh/1/intr_07.jpg) no-repeat center center;
    }
    .pic-8 {
      animation-delay: 42s;
      -o-animation-delay: 42s;
      -moz--animation-delay: 42s;
      -webkit-animation-delay: 42s;
      background: url(http://88t.eu/Pictures/sh/1/intr_08.jpg) no-repeat center center;
    }
    .pic-9 {
      animation-delay: 48s;
      -o-animation-delay: 48s;
      -moz--animation-delay: 48s;
      -webkit-animation-delay: 48s;
      background: url(http://88t.eu/Pictures/sh/1/intr_09.jpg) no-repeat center center;
    }
    .pic-10 {
      animation-delay: 54s;
      -o-animation-delay: 54s;
      -moz--animation-delay: 54s;
      -webkit-animation-delay: 54s;
      background: url(http://88t.eu/Pictures/sh/1/intr_10.jpg) no-repeat center center;
    }
    .pic-11 {
      animation-delay: 60s;
      -o-animation-delay: 60s;
      -moz--animation-delay: 60s;
      -webkit-animation-delay: 60s;
      background: url(http://88t.eu/Pictures/sh/1/intr_11.jpg) no-repeat center center;
    }
    .pic-12 {
      animation-delay: 66s;
      -o-animation-delay: 66s;
      -moz--animation-delay: 66s;
      -webkit-animation-delay: 66s;
      background: url(http://88t.eu/Pictures/sh/1/intr_12.jpg) no-repeat center center;
    }
    .pic-13 {
      animation-delay: 72s;
      -o-animation-delay: 72s;
      -moz--animation-delay: 72s;
      -webkit-animation-delay: 72s;
      background: url(http://88t.eu/Pictures/sh/1/intr_13.jpg) no-repeat center center;
    }
    .pic-14 {
      animation-delay: 78s;
      -o-animation-delay: 78s;
      -moz--animation-delay: 78s;
      -webkit-animation-delay: 78s;
      background: url(http://88t.eu/Pictures/sh/1/intr_14.jpg) no-repeat center center;
    }
    .pic-15 {
      animation-delay: 84s;
      -o-animation-delay: 84s;
      -moz--animation-delay: 84s;
      -webkit-animation-delay: 84s;
      background: url(http://88t.eu/Pictures/sh/1/intr_15.jpg) no-repeat center center;
    }
    .pic-16 {
      animation-delay: 90s;
      -o-animation-delay: 90s;
      -moz--animation-delay: 90s;
      -webkit-animation-delay: 90s;
      background: url(http://88t.eu/Pictures/sh/1/intr_16.jpg) no-repeat center center;
    }
    .pic-17 {
      animation-delay: 96s;
      -o-animation-delay: 96s;
      -moz--animation-delay: 96s;
      -webkit-animation-delay: 96s;
      background: url(http://88t.eu/Pictures/sh/1/intr_17.jpg) no-repeat center center;
    }
    .pic-18 {
      animation-delay: 102s;
      -o-animation-delay: 102s;
      -moz--animation-delay: 102s;
      -webkit-animation-delay: 102s;
      background: url(http://88t.eu/Pictures/sh/1/intr_18.jpg) no-repeat center center;
    }
    .pic-19 {
      animation-delay: 108s;
      -o-animation-delay: 108s;
      -moz--animation-delay: 108s;
      -webkit-animation-delay: 108s;
      background: url(http://88t.eu/Pictures/sh/1/intr_19.jpg) no-repeat center center;
    }
    /* keyframes*/

    @keyframes slideShow {  
     0% {
     opacity: 0;
     transform:scale(1);
     -ms-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     transform:scale(1.1);
     -ms-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     transform:scale(1);
     -ms-transformm:scale(1);
    }
    }
     @-o-keyframes 
    slideShow {  0% {
     opacity: 0;
     -o-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -o-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -o-transformm:scale(1);
    }
    }
     @-moz-keyframes 
    slideShow {  0% {
     opacity: 0;
     -moz-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -moz-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -moz-transformm:scale(1);
    }
    }
     @-webkit-keyframes 
    slideShow {  0% {
     opacity: 0;
     -webkit-transform:scale(1);
    }
     5% {
     opacity: 1
    }
     25% {
     opacity: 1;
    }
     30% {
     opacity: 0;
     -webkit-transform:scale(1.1);
    }
     100% {
     opacity: 0;
     -webkit-transformm:scale(1);
    }
    }

​

代码语言：javascript
复制
 .pic-wrapper {
   margin: 0px 0px 0px 0px;
   padding: 0px;
   position: absolute;
   width: 259px;
   height: 200px;
   overflow: hidden;
 }
 figure {
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 258px;
   height: 200px;
   opacity: 0;
   /*animation*/
   animation: slideShow 24s linear infinite;
   -o-animation: slideShow 24s linear infinite;
   -moz-animation: slideShow 24s linear infinite;
   -webkit-animation: slideShow 24s linear infinite;
   /*suggestion by marczking to make the code shorter: */
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
 }
 .pic-1 {
   opacity: 1;
   background: url(http://88t.eu/Pictures/sh/1/intr_01.jpg) no-repeat center center;
 }
 .pic-2 {
   animation-delay: 6s;
   -o-animation-delay: 6s;
   -moz--animation-delay: 6s;
   -webkit-animation-delay: 6s;
   background: url(http://88t.eu/Pictures/sh/1/intr_02.jpg) no-repeat center center;
 }
 .pic-3 {
   animation-delay: 12s;
   -o-animation-delay: 12s;
   -moz--animation-delay: 12s;
   -webkit-animation-delay: 12s;
   background: url(http://88t.eu/Pictures/sh/1/intr_03.jpg) no-repeat center center;
 }
 .pic-4 {
   animation-delay: 18s;
   -o-animation-delay: 18s;
   -moz--animation-delay: 18s;
   -webkit-animation-delay: 18s;
   background: url(http://88t.eu/Pictures/sh/1/intr_04.jpg) no-repeat center center;
 }
 .pic-5 {
   animation-delay: 24s;
   -o-animation-delay: 24s;
   -moz--animation-delay: 24s;
   -webkit-animation-delay: 24s;
   background: url(http://88t.eu/Pictures/sh/1/intr_05.jpg) no-repeat center center;
 }
 .pic-6 {
   animation-delay: 30s;
   -o-animation-delay: 30s;
   -moz--animation-delay: 30s;
   -webkit-animation-delay: 30s;
   background: url(http://88t.eu/Pictures/sh/1/intr_06.jpg) no-repeat center center;
 }
 .pic-7 {
   animation-delay: 36s;
   -o-animation-delay: 36s;
   -moz--animation-delay: 36s;
   -webkit-animation-delay: 36s;
   background: url(http://88t.eu/Pictures/sh/1/intr_07.jpg) no-repeat center center;
 }
 .pic-8 {
   animation-delay: 42s;
   -o-animation-delay: 42s;
   -moz--animation-delay: 42s;
   -webkit-animation-delay: 42s;
   background: url(http://88t.eu/Pictures/sh/1/intr_08.jpg) no-repeat center center;
 }
 .pic-9 {
   animation-delay: 48s;
   -o-animation-delay: 48s;
   -moz--animation-delay: 48s;
   -webkit-animation-delay: 48s;
   background: url(http://88t.eu/Pictures/sh/1/intr_09.jpg) no-repeat center center;
 }
 .pic-10 {
   animation-delay: 54s;
   -o-animation-delay: 54s;
   -moz--animation-delay: 54s;
   -webkit-animation-delay: 54s;
   background: url(http://88t.eu/Pictures/sh/1/intr_10.jpg) no-repeat center center;
 }
 .pic-11 {
   animation-delay: 60s;
   -o-animation-delay: 60s;
   -moz--animation-delay: 60s;
   -webkit-animation-delay: 60s;
   background: url(http://88t.eu/Pictures/sh/1/intr_11.jpg) no-repeat center center;
 }
 .pic-12 {
   animation-delay: 66s;
   -o-animation-delay: 66s;
   -moz--animation-delay: 66s;
   -webkit-animation-delay: 66s;
   background: url(http://88t.eu/Pictures/sh/1/intr_12.jpg) no-repeat center center;
 }
 .pic-13 {
   animation-delay: 72s;
   -o-animation-delay: 72s;
   -moz--animation-delay: 72s;
   -webkit-animation-delay: 72s;
   background: url(http://88t.eu/Pictures/sh/1/intr_13.jpg) no-repeat center center;
 }
 .pic-14 {
   animation-delay: 78s;
   -o-animation-delay: 78s;
   -moz--animation-delay: 78s;
   -webkit-animation-delay: 78s;
   background: url(http://88t.eu/Pictures/sh/1/intr_14.jpg) no-repeat center center;
 }
 .pic-15 {
   animation-delay: 84s;
   -o-animation-delay: 84s;
   -moz--animation-delay: 84s;
   -webkit-animation-delay: 84s;
   background: url(http://88t.eu/Pictures/sh/1/intr_15.jpg) no-repeat center center;
 }
 .pic-16 {
   animation-delay: 90s;
   -o-animation-delay: 90s;
   -moz--animation-delay: 90s;
   -webkit-animation-delay: 90s;
   background: url(http://88t.eu/Pictures/sh/1/intr_16.jpg) no-repeat center center;
 }
 .pic-17 {
   animation-delay: 96s;
   -o-animation-delay: 96s;
   -moz--animation-delay: 96s;
   -webkit-animation-delay: 96s;
   background: url(http://88t.eu/Pictures/sh/1/intr_17.jpg) no-repeat center center;
 }
 .pic-18 {
   animation-delay: 102s;
   -o-animation-delay: 102s;
   -moz--animation-delay: 102s;
   -webkit-animation-delay: 102s;
   background: url(http://88t.eu/Pictures/sh/1/intr_18.jpg) no-repeat center center;
 }
 .pic-19 {
   animation-delay: 108s;
   -o-animation-delay: 108s;
   -moz--animation-delay: 108s;
   -webkit-animation-delay: 108s;
   background: url(http://88t.eu/Pictures/sh/1/intr_19.jpg) no-repeat center center;
 }
 /* keyframes*/
 @keyframes slideShow {
   0% {
     opacity: 0;
     transform: scale(1);
     -ms-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     transform: scale(1.1);
     -ms-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     transform: scale(1);
     -ms-transformm: scale(1);
   }
 }
 @-o-keyframes slideShow {
   0% {
     opacity: 0;
     -o-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     -o-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     -o-transformm: scale(1);
   }
 }
 @-moz-keyframes slideShow {
   0% {
     opacity: 0;
     -moz-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     -moz-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     -moz-transformm: scale(1);
   }
 }
 @-webkit-keyframes slideShow {
   0% {
     opacity: 0;
     -webkit-transform: scale(1);
   }
   5% {
     opacity: 1
   }
   25% {
     opacity: 1;
   }
   30% {
     opacity: 0;
     -webkit-transform: scale(1.1);
   }
   100% {
     opacity: 0;
     -webkit-transformm: scale(1);
   }
 }
代码语言：javascript
复制
<div class="pic-wrapper lejatszokep">
  <figure class="pic-1"></figure>
  <figure class="pic-2"></figure>
  <figure class="pic-3"></figure>
  <figure class="pic-4"></figure>
  <figure class="pic-5"></figure>
  <figure class="pic-6"></figure>
  <figure class="pic-7"></figure>
  <figure class="pic-8"></figure>
  <figure class="pic-9"></figure>
  <figure class="pic-10"></figure>
  <figure class="pic-11"></figure>
  <figure class="pic-12"></figure>
  <figure class="pic-13"></figure>
  <figure class="pic-14"></figure>
  <figure class="pic-15"></figure>
  <figure class="pic-16"></figure>
  <figure class="pic-17"></figure>
  <figure class="pic-18"></figure>
  <figure class="pic-19"></figure>
</div>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-06 17:12:09

这与为您的animation设置的时间有关。当我把时间改为114秒的时候，它就循环遍了所有的图像。

如果您需要使其更快或更慢，您将不得不遍历并调整figure元素上的figure和每个.pic-x元素上的animation-delay。

票数 1
EN

Stack Overflow用户

发布于 2015-11-06 20:37:42

这段代码太长了，类太多了，维护起来不实用，而且Css也太多了。我没有检查为什么这不能正常工作，这将是设定的时间。这样做，代码要少得多，响应性强得多，您可以轻松地添加和删除图片：

代码语言：javascript
复制
div#slider figure {
position: relative;
width: 800%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
-webkit-animation: 28s bro infinite;  
animation: 28s slidy infinite; 
}

http://codepen.io/damianocel/pen/wKxgpz

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33571533

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档