4

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

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

我该怎么做？

我尝试了以下，但滚动不流畅....

这是我的小提琴

代码：

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

3 回答 3

8

你可以这样做

  • 将您的图像合并到 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>

于 2013-03-27T15:38:29.300 回答
2

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

动画范围内没有足够的像素在如此长的持续时间内看起来很流畅。

于 2013-03-27T15:21:04.593 回答
1

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

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

小提琴示例

鼠标悬停暂停的小提琴示例：

一些代码可以让该死的 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
于 2013-03-29T19:02:48.960 回答