幻灯片

幻灯片

关注
发信
''的类型初始值设定项引发了异常
在mongodb中四舍五入到小数点后两位
多个构造函数：Python方式？
python舍入问题。
运行时权限
基本CUDA C程序在某些条件下崩溃
Git 推送:“fatal 'origin' 似乎不是 git 存储库 - 致命无法从远程存储库读取."
AngularJS：工厂$ http服务
Composer install 在 Dockerfile 中运行时不安装包
PySpark:彻底清理检查点
git - 是否可以从“git push"中排除文件，但将它们保存在本地存储库中?
使用程序化文本缩小打印质量图像的文件大小，而不会降低打印质量
通过travis API获取仓库的最新travis构建状态
如何在Go中构建发行版本二进制文件？
使用查找和卷曲将目录内容上载到Sonatype Nexus存储库

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

扫码查看
本文介绍了纯粹的CSS3幻灯片重复了最后4张幻灯片？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我找到了一个脚本，即：。



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



。



。



HTML：

  
它与为您的动画设置的时间有关。当我将时间更改为114s时，它会循环显示所有图像。
 
 
 
如果您需要使速度更快或更慢，则必须经过并调整<$ c $在图元素和动画延迟上手动添加  c $ c> .pic-x 元素。
 
I found a script, namely: "Pure CSS / CSS3 Slideshow with Image Panning and zooming Effect".



The problem with this it that it repeats the last 4 slides. Could someone tell me why and how to resolve this problem?



My first fiddle, demonstrating the issue.



My second one, proving the issue.



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

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

 .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);
   }
 }
<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>
 解决方案 
It has to do with the time set for your animation. When i changed the time to 114s it cycled throught all images.
If you need to make it faster or slower you will have to go through and adjust the animation on the figure element and the animation-delay manually on each .pic-x element.
                        
这篇关于纯粹的CSS3幻灯片重复了最后4张幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
07-16 19:16
查看更多
Powered by LMLPHP ©2025 幻灯片 0.042063