7

私は次のことが可能かどうかを確認しようとしています。

単一回転div

要素内の単一のdivを継続的に循環できるようにしたい[したがって、divの開始は、循環するのと同じdivの終了までになります]。

これは既存のプラグインである必要はありません。可能であれば、divのクローンを作成しないことをお勧めします。divの幅は、サイクルの前にjavascriptを介して設定されますが、少し調整される場合があります。

アイデアをいただければ幸いです。

4

2 に答える 2

5

jsBinデモ

jQuery：

$('.scroller').each(function(){
  $(this).find('img').clone().appendTo($(this));
});

(function move(){
  $('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();

HTML：

  <div class="scroller">
    <img src="" alt="" />
  </div>

CSS：

.scroller{
  width:310px;
  height:80px;
  white-space:nowrap;
  word-spacing:-1em;
  overflow:hidden;
  margin:30px;
}
.scroller img{
  display:inline; 
}

クローンは1回だけ作成されます。scrollLeft()私のjQueryスクリプトよりも、 elementプロパティで再生するだけのループが作成されます。

注意：これは単なる例であり、310px動的に計算することができますが、それは別の話です。単純にしましょう。

于 2012-08-30T16:12:04.780 に答える
0

マーキープラグインはどうですか？

デモ
ドキュメント

左にスクロールするデモの最初の例では、コンテナの幅をコンテンツと同じかそれよりも小さく設定してスクロールすると、滑らかに循環しているように見えることに注意してください。

于 2012-08-30T15:43:00.513 に答える