HTML/css/Javascript云幻灯片

所以，我试图在这个网站上创造一种类似云的效果：

---

我应该如何使用html、css或javascript实现这一点？

您可以使用重复的背景图像，并使用jQuery设置x位置的动画：

HTML可以是您想要的任何内容：

<div class="banner">
  <!-- etc. -->
</div>

还有一些jQuery：

function animateBanner() {
  jQuery('.banner').css({
    backgroundPositionX: '0'
  }).animate({
    backgroundPositionX: '-400px'
  }, 5000, 'linear', animateBanner);
}
animateBanner();

---

这里有一个演示：

根据Brandon的建议并进一步推进，我利用jquery的动画功能提出了一个可行的解决方案：

    function animate() {
$( ".banner" ).animate({ "left": "+=400px" }, 3000, "linear",
                       function() {$(this).css({ "left": "-=400px" });
animate();
        } );
}

animate();

请参阅以下代码段：

建议的解决方案使用两个图像，水平并排放置。 两幅图像的x坐标都是线性插值的，以实现包裹效果。

---

注意，你需要一个无缝的图像才能很好地匹配。

好吧，互联网上没有提供类似的教程，我尝试了一些方法，但没有一种能产生这种效果，所以我删除了它们的代码。这是我的代码，它不起作用（请原谅，我在jQuery方面很差劲。）看起来您使用的是

元素，而不是背景图像。在这种情况下，您需要设置

left

属性的动画，而不是

backgroundPositionX

。有关示例，请参见vov的答案。还是不行！请看一下我的代码，告诉我出了什么问题！代码中缺少“滚动图像”css类定义。

    function animate() {
$( ".banner" ).animate({ "left": "+=400px" }, 3000, "linear",
                       function() {$(this).css({ "left": "-=400px" });
animate();
        } );
}

animate();