发布时间：2025-12-10 13:02:26 浏览次数：1
在HTML5中，可以非常方便地实现图片无缝循环滚动。下面我们来看一段示例代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片无缝循环滚动</title><style>#container {width: 100%;height: 300px;overflow: hidden;}#list {list-style: none;width: 200%;height: 300px;margin: 0;padding: 0;animation: scroll 20s linear infinite;}#list li {float: left;width: 50%;height: 300px;}#list li img {width: 100%;height: 100%;}@keyframes scroll {0% {transform: translateX(0);}100% {transform: translateX(-50%);}}</style></head><body><p ><ul ><li><img src="image1.jpg"></li><li><img src="image2.jpg"></li><li><img src="image3.jpg"></li><li><img src="image4.jpg"></li></ul></p></body></html>首先，我们创建了一个容器，设定了其宽度和高度，并将其 overflow 属性设为 hidden，以便在其内部滚动图片时不会出现滚动条。接着，我们创建了一个列表，将其宽度设为容器的两倍，并给其内部的每个列表项设定了宽度为容器宽度的一半，这样每个列表项就占了整个容器的一半，以便我们将两张图片组合成一张。我们还为列表设定了 margin 和 padding 为 0，以便每个列表项之间不会出现间隔。最后，我们用 CSS3 中的 animation 属性为列表项设定了一个持续时间为 20 秒的动画，以及一个线性平滑的过渡效果，并将其设置为无限循环。而关键在于我们使用了 CSS3 中的 transform 属性，将图片的位置左移了容器宽度的一半，从而实现了滚动效果。在此基础上，我们只需要将这个代码复制到自己的 HTML 文件中，修改图片文件名和路径即可。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流