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

- DextrousDave

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>

将您的图片合并成一个图像：

^{（©免责声明：本答案和相关演示例子使用随机选取的商标，属于其各自所有者的商标。）}

---

如果您想为每个商标添加“点击”功能

是的，在背景图片上，并且在悬停时“暂停”，请按照以下方式操作：

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>  

- Roko C. Buljan

---

@DextrousDave 鼠标悬停暂停：http://jsbin.com/olikom/7/edit - 不，您不能点击。 - Roko C. Buljan

@DextrousDave，你的做法不对。图片没有足够的空间显示，它们在父元素内部跳来跳去。我很快会向你展示另一种方法。 - Roko C. Buljan

谢谢，兄弟...顺便问一下，你的动画能否添加滚动选项？也就是说，能否在图片之间左右滚动？ - DextrousDave

@DextrousDave 这将更多涉及编程。无论如何，我编辑了我的演示以添加 CLICK - follow logo url。 - Roko C. Buljan

这是一些很棒的工作。谢谢你。有什么办法可以控制滚动吗？ - DextrousDave

Answer 2

问题在于你的duration太长了，这就是为什么它不能流畅运行的原因。你的动画现在需要30秒（30000毫秒）才能完成。

在你的动画范围内没有足够的像素来支持如此长时间的流畅展示。

- Marcel Gwerder

---

谢谢，但如果你玩我的小提琴，你会发现如果我将它设置为6000，它会滚动得太快了，所以我调整了它到我需要的速度... - DextrousDave

Answer 3

以下是关于水平自动滚动的一些很酷的插件和示例 - 称为跑马灯。

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

Fiddle 示例

鼠标悬停暂停的Fiddle 示例:

一些代码，用于消除该死的stackoverflow“链接到JSfiddle必须附带...blah blah”

(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

- David Van Staden