Question

我正在尝试基于this代码（信用）进行无限滚动图像库。由于某种原因，在最后一个图像滚动后有一个滞后（应该显示的第一张图片直到最后一张图像消失后5秒才显示）并且我不确定原因。我想知道什么是错的以及如何解决这个问题（让第一张图像在滚动后立即出现在最后一张图像旁边。）

这是CSS代码的样子：

* {margin: 0; padding: 0;} 
body {
    background: url('dark_geometric.png');
}
#container {
    width: 1000px;
    overflow: hidden;
    margin: 50px auto;
    background: white;
}
/*photobanner*/
.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
}
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
}
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
    font-size: 0
}
.photobanner img {
    width: 200px;
    height: 200px;
    margin-right: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
img {
    width: 200px;
    height: 200px;
}
li {
    display: inline;
}

这里有一些HTML代码：

<div id="container">
    <div class="photobanner">
        <ul id="scroller">
          <li><img class="first" src="/artsu/001.jpg" alt="" /></li>
          <li><img src="/artsu/002.jpg" alt="" /></li>
          <li><img src="/artsu/003.jpg" alt="" /></li>
        </ul>
    </div>
</div>

我添加到CSS的唯一内容是img标签（保持img大小一致）和li标签（使图像水平）在底部。

Answer 1

您的代码工作正常，只需要更改class从[{1}}（即img）分配标记，然后将其分配给.first，让你的first li tag有效。

但是你需要animation calculate来获得预期的输出。

timing

* {
   margin: 0;
   padding: 0;
}
body {
   background: url('dark_geometric.png');
   overflow: hidden;
}
#container {
  width: 1000px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}
 /*photobanner*/

 .photobanner {
   height: 233px;
   width: 1100px;
   margin-bottom: 80px;
 }

 ul > li {
   display: inline-block;
 }

 li.first {
   -webkit-animation: bannermove 8s linear infinite;
   -moz-animation: bannermove 8s linear infinite;
   -ms-animation: bannermove 8s linear infinite;
   -o-animation: bannermove 8s linear infinite;
   animation: bannermove 8s linear infinite;
 }

 @keyframes bannermove {
   0% {
     margin-left: 0px;
   }
   100% {
     margin-left: -450px;
   }
 }

无限滚动图像库（CSS）中的滞后

1 个答案: