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

Question

我想为我的wordpress网站创建自己的jQuery动画，因为没有wordpress插件可供我使用，我不想使用jquery插件，它会在wordpress中产生问题。

我的HTML包含一个水平图像列表，我只想自动向左平滑滚动（几乎就像一个自动滚动的网站广告显示）

我该怎么做？

我尝试了以下内容，但滚动不顺畅....

这是我的FIDDLE

代码：

jQuery的：

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

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

HTML：

<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>

Answer 1

你可以通过

来完成

• 将您的图片合并为1个.png文件
• 设置图像和元素背景，重复（0居中）
• 使用jQuery动画制作背景位置

(function slide(){
  $('#clientsSlider').animate({backgroundPosition : '-=2px'}, 20, 'linear', slide);
})();

#clientsSlider{
  height: 96px;
  background: #e5e5e5 url(http://i.stack.imgur.com/kejzw.png) repeat 0 center;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clientsSlider"></div>

将您的图片合并为一个图片：

^{（©disclaimer：用于本答复和相关演示示例的随机选择的徽标 - 是其各自所有者的商标和财产。）}

---

如果您想为每个徽标添加点击功能

是的，在背景图片上，在悬停时暂停会像：

var $sl = $('#clientsSlider'),
    slPos = 0,
    goTo = "",
    totW = 1254, // total image width
    imgMap = {
      /* logoEndsAtPX  : "urlToFollow" */
      366  : "planet.html",
      516  : "absa.html",
      766  : "kumbra.html",
      1051 : "bosch.html",
      1254 : "samancor.html"
    };

function slide(){
  slPos -= 1 ;
  $sl.animate({backgroundPosition : slPos}, 10, 'linear', slide);
}

$sl.hover(function(ev) {
  return ev.type=='mouseenter' ? $(this).stop() : slide() ;
}).on('click', function( ev ) {
  var mX = ev.clientX - $(this).offset().left;
  var mFixed = (Math.abs(slPos) + mX)  % totW;
  console.log(mFixed);
  $.each(imgMap, function( key, val ){
    goTo = val;
    if(key>mFixed)return false;
  });	
  alert( goTo ); // DO WITH URL WHATEVER YOU LIKE
});

slide(); // START!

#clientsSlider{
  height: 96px;
  background: #e5e5e5 url(http://i.stack.imgur.com/kejzw.png) repeat 0 center;
  margin: 0 auto;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clientsSlider"></div>  

Answer 2

问题是你的duration远远高。这就是为什么它不能顺利。 您的动画现在需要30 seconds（30000毫秒）才能完成。

动画范围内的像素数量不足，看起来平滑，持续时间很长。

Answer 3

以下是一些很酷的插件和水平自动滚动条的示例 - 名为 Marquees

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Fiddle示例

Fiddle示例暂停鼠标悬停：

安静该死的stackoverflow的一些代码“链接到JSfiddle必须伴随... blabla”

(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