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

Question

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

ただし、参照したスクリプトは少し遅れているようです (時代遅れですか?) ので、誰かがより良い解決策を知っているかどうか疑問に思っていました. (jQuery ソリューションを歓迎します。)

Answer 1

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

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

更新: これをプロダクション コードで使用しました。このプラグインは、70 個以上の 150×65 ピクセルの画像を非常にスムーズにループすることができます。これと同様に、私が試した別のプラグインの多くは失敗していました。

注: IE 6/7 の問題で大混乱がz-index発生し、表示されませんでした。 - しかし、これも私の CSS が原因の 1 つである可能性があります。IE でまったく表示されないという問題を抱えている人は、標準の IEz-index修正をチェックしてください: http://www.google.com/search?q=ie+z+index+issues

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

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

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

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

Silky-Smooth jQuery マーキーとGiva Labs のマーキー

Answer 3

ちょっとした考え。このようなことができますか。

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