滞后于无限滚动图像库(CSS) [英] Lag in an infinite scrolling image gallery (CSS)

问题描述

我正在尝试基于 此> 代码(信用).由于某种原因，最后一张图像滚动后会有一个滞后时间(应该显示的第一张图片要等到最后一张图像消失后5秒钟才会出现)，我不确定为什么.我想知道问题出在哪里以及如何解决(使第一张图像在滚动时立即出现在最后一张图像旁边).

I'm trying to do an infinite scrolling image gallery based on this code (credits). For some reason, there's a lag after the last image scrolls (the first picture that is supposed to show up doesn't show up until 5 seconds after the last image disappears) and I'm not sure why. I want to know what's wrong and how I can fix this (make the first image appear beside the last image as soon as it scrolls.)

这是CSS代码的样子:

Here's what the CSS code looks like:

* {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代码:

And here's a bit of the HTML code:

<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标签(以使图像水平).

The only things I added to the CSS are the img tag (to keep img size consistent) and li tag (to make the images horizontal) in the bottom.

推荐答案

您的代码运行正常，只是您需要从 img class 分配>(即 .first )将其分配给 first li标记，这使您的 animation 可以正常工作.

Your codes are working fine, it's just that you need to change the class assigning of tag from img (i.e. .first) to assigning that to first li tag, this makes your animation works.

但是您需要计算 timing 以获得预期的输出.

But it's you who need to calculate the timing to get expected output.

* {
   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;
   }
 }

<div id="container">

  <div class="photobanner">
    <ul id="scroller">
      <li class="first"><img src="http://via.placeholder.com/350x150/111/fff" alt="" /></li>
      <li><img src="http://via.placeholder.com/350x150/f33/111" alt="" /></li>
      <li><img src="http://via.placeholder.com/350x150/2f2/111" alt="" /></li>
    </ul>
  </div>
</div>

这篇关于滞后于无限滚动图像库(CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！