使用jQuery自动滚动图像（平滑）

我想为我的wordpress网站创建我自己的jQuery动画，因为没有我需要的wordpress插件，我不想使用jQuery插件，它会在wordpress内部产生问题

我的html由一个水平图像列表组成，我只想自动平滑地向左滚动（就像一个自动滚动的网站广告显示）

我该怎么做

我尝试了以下操作，但滚动不顺畅

这是我的

代码：

jQuery：

var w = $('#clientsSlider ul').width();

$('#clientsSlider > ul').animate({
     left: -w
  }, 30000)

HTML:

问题是你的

持续时间太长了。这就是为什么它不可能是平滑的。
您的动画现在需要30秒才能完成

动画范围内的像素不足，无法在如此长的持续时间内看起来平滑。
您可以通过


将图像合并到1.png文件中
设置图像ans元素背景，重复（0中心）
使用jQuery设置背景位置的动画


（函数幻灯片（）{
$（#clientsSlider'）。动画（{backgroundPosition:'-=2px'}，20，'线性'，幻灯片）；
})();
#客户端滑动器{
高度：96px；
背景：#e5 url(http://i.stack.imgur.com/kejzw.png)重复0中心；
保证金：0自动；
}
这里有一些很酷的插件和水平自动滚动器的示例-称为字幕


范例

鼠标悬停的示例：

一些代码让该死的stackoverflow“指向JSFIDLE的链接必须伴随着…blabla”

（函数（$）{
$.fn.textWidth=函数（）{
var calc=''+$（this）.text（）+''；
$（'body'）。追加（计算）；
var width=$（'body'）.find（'span:last'）.width（）；
$（'body'）.find（'span:last'）.remove（）；
返回宽度；
}看到小提琴了吗
非常感谢roXon-我如何在鼠标上方暂停动画？同样，这是个好主意，但若我希望用户能够单击每个图像，该怎么办？@DextrousDave pause on hover:-不，你们不能单击。你们能看一下下面的小提琴吗：-为什么是下一张图像（从最右边）要花这么长时间才能显示？它不会立即显示…而且，当我在我的wordpress网站上实现这一点时，只有前3张图像显示，停止并再次加载动画中的相同3张图像…这可能是什么问题？@DextrousDave你做得不对。这些图像没有足够的空间显示，它们到处跳跃（在父元素中）我将很快向您展示另一种方式。谢谢，但如果您玩我的小提琴，您将看到，如果我将其设置为6000，它将滚动到最快，因此我将其调整到所需的速度。。。
<div id="clientsSlider">
    <ul>
        <li><img src="..." /></li>
        <li><img src="..." /></li>
        <li><img src="..." /></li>
        <li><img src="..." /></li>
        <li><img src="..." /></li>
    </ul>
</div>

(function($) {
        $.fn.textWidth = function(){
             var calc = '<span style="display:none">' + $(this).text() + '</span>';
             $('body').append(calc);
             var width = $('body').find('span:last').width();
             $('body').find('span:last').remove();
            return width;
        };....see the fiddle