4

自分のワードプレス サイト用に独自の jQuery アニメーションを作成したいのですが、必要なワードプレス プラグインがなく、jquery プラグインを使用したくないため、ワードプレス内で問題が発生します。

私のhtmlは、水平方向の画像のリストで構成されており、自動的に左にスムーズにスクロールしたいだけです（自動的にスクロールするWebサイトの広告表示のように）

どうすればいいですか？

以下を試してみましたが、スクロールがスムーズではありません....

これが私のフィドルです

コード：

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>

画像を 1 つにマージします。

TMロゴ
(©免責事項: この回答および関連するデモの例の目的で使用されるランダムに選択されたロゴは、商標であり、それぞれの所有者の所有物です。)

すべてのロゴにクリック機能を追加したい場合

はい、背景画像で、ホバーで一時停止すると、次のようになります。

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 に答える