纯CSS3幻灯片重复最后4张幻灯片？

时间：2015-11-06 16:40:53

标签： html css css3

我找到了一个脚本，即：＆＃34; Pure CSS / CSS3 Slideshow with Image Panning and zooming Effect＆＃34;。

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

My first fiddle, demonstrating the issue

My second one, proving the issue

HTML：

<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：

    .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);
    }
    }

＆＃13;
＆＃13; 
 .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);
   }
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

这与您为animation设置的时间有关。当我将时间改为114秒时，它会循环显示所有图像。

如果您需要更快或更慢，则需要在animation元素上调整figure，并在每个animation-delay元素上手动调整.pic-x

答案 1 :(得分：0)

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

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

相关问题
最新问题