Javascript 有没有可能使滑动img动画以更快的速度连续

发布于03月28日

我试着做this个

.image_wrap {
   width:580px;
   height:260px;
   overflow:hidden;
}
.image_wrap img {
        width:100%;
        height:100%;
        transform:scale(1.2);
        -webkit-animation: 1s slideImg linear infinite;
        animation: 1s slideImg linear infinite;
    }
    
    @-webkit-keyframes slideImg {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
    }
    @keyframes slideImg {
        from { transform: translateY(100%); }
        to { transform: translateY(-100%); }
    }

但我正在努力使它在重复之间没有空白.这可能吗？

老实说，我只try 了一些东西，但我计划try 的最新事情是使用背景img，并设置在一个单独的div，并try 动画？

推荐答案

最简单的解决方案是复制幻灯片.像这样:

.slider {
  max-width: 580px;
  height: 260px;
  overflow: hidden;
}
.images {
  animation: 4s slider linear infinite;
}
.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes slider {
  0%,100% {
    transform: translateY(0);
  }
  99.999% {
    transform: translateY(-50%);
  }
}

<div class="slider">
  <div class="images">
    <img src="https://picsum.photos/id/6/580/260" alt="">
    <img src="https://picsum.photos/id/66/580/260" alt="">
    <img src="https://picsum.photos/id/666/580/260" alt="">
    <!-- duplicates -->
    <img src="https://picsum.photos/id/6/580/260" alt="">
    <img src="https://picsum.photos/id/66/580/260" alt="">
    <img src="https://picsum.photos/id/666/580/260" alt="">
  </div>
</div>