web-dev-qa-db-ja.com

jQueryの画像を含む水平ティッカーを連続的にスクロールしますか？

私はこのようなことをしたいと思います： http://javascript.about.com/library/blcmarquee1.htm

しかし、私が参照したスクリプトは少し遅れているようです（時代遅れですか？）。 （jQueryソリューションを歓迎します。）

javascriptjquerymarqueescrollerticker
19
Mathias Bynens

これを見つけました— jQuery駆動型で、画像があります。現在のプロジェクトに使用するつもりです。

http://logicbox.net/jquery/simplyscroll/

更新：私は現在、実稼働コードでこれを使用しています。このプラグインは、70 + 150x65pxの画像を非常にスムーズにループできます。これに似た他の多くのプラグインが失敗していました。

注：z-index IE 6/7で問題が発生したなど）-しかし、これは私のCSSが原因の可能性もあります。 IE標準を確認してくださいIE z-index修正： http://www.google.com/search?q=ie+z+index+issues

最新の更新：これらのようなプラグインを実装する際に考慮すべき追加事項：

  • スクロールするアイテムの数とコンテンツのタイプ。スクロールする画像が15枚以上になるとすぐにグリッチが発生し始める数字を見つけました。
  • 古いバージョンのjqueryに関連付けられたこれらのプラグインをいくつか見つけました
  • スクロールする画像がすべて同じサイズである場合、私が実験した多くのプラグインは、すべての画像が同じサイズであるが、チュートリアルでこれを明確にしていない場合にのみ機能しました。プラグインが実行され、すべてx幅のliタグの文字列が設定され、スクロールを管理するためにすべてがチェーン化されたそれらの合計距離が計算されると思います。
  • 効果-連続的にスクロールするものもあれば、1つのイメージを一時停止してから別のイメージを移動するものもあります

また、これら2つのスクローラープラグインも非常に優れていることがわかりました。

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

33
megaSteve4

The Silky-Smooth jQuery Marquee および Giva LabsのMarquee

7
Sampson

ちょっとした考え。このようなことをしてもらえますか。

<style type="text/css">

.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}

.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}

.inline-image{
display:inline-block;
}

</style>

<script type="text/javascript">

var img;

function imgScroll(){
 img = $(".inline-image").first();
 img.animate({width:0},2500,'linear',function(){
   img.remove();
   $(".imgholder").append(img);
   imgScroll();
 });

}

$(document).ready(function(){

imgScroll();  

});

</script>

そしてhtml

<div class="imgwindow">
  <div class="imgholder">
   <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
  </div>
</div>
3
buck54321