html图片滚动播放

HTML图片滚动播放可以通过JavaScript或者CSS动画来实现。以下是一种常见的方法：

1. 使用JavaScript（轮播图库，如Slideshow或Swiper）：
JavaScript库提供了API来控制图片的切换，例如设置定时器，当到达最后一张后自动跳转到第一张，形成循环滚动效果。代码示例：

   <div id="slider">
     <img src="image1.jpg" alt="Slide 1">
     <img src="image2.jpg" alt="Slide 2">
     <!-- 更多图片 -->
   </div>
   <script>
     var slider = new Slider('#slider', { loop: true });
   </script>

2. CSS动画（无缝滚动）：
可以使用CSS的`animation`属性配合关键帧来实现图片无缝滚动，配合一些额外的JavaScript辅助，例如改变图片的`background-position`。示例代码：

   .slide {
     width: 100%;
     height: 400px;
     background-image: url('image1.jpg');
     background-size: cover;
     animation: slide infinite 2s;
   }
   @keyframes slide {
     0% { background-position: 0; }
     100% { background-position: 100%; }
   }