スライド5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。「横スライドパターン:jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示まずは横方向にスライドするパターンの実装についてです。Webページに横に並べられた要素が右から左へ流れ続けます。動作自体はただひたすら要素が流れ続けるシンプルなものです。スライド全体にマウスオーバーした際にはスライド動作を一時的に止め、マウスアウトするとスライドが再開します。全体構成についてまずはHTMLから。alt=""></a></li></ul></div><!--/.loopSlider-->スライド動作させる要素は<ul>を使ってリストで構成しそのリスト全体は任意のブロック要素で囲います。リストの中の要素に<a>タグでリンクを貼っていますがこれは動作自体には特に影響しないものになるので不要な場合は外してしまって問題ありません。この要素に対してCSSは以下のように指定します。none;}一番最初にある「.loopSliderWrap」はスクリプト側から生成するブロック要素になりこのセレクタに対しては表示するスライダーの高さを指定しておきます。HTML側でリスト全体を囲んだブロック要素「.loopSlider」には要素がスライドする際の、表示する領域の幅と高さを指定します。中の<ul>や<li>といったリスト要素は「float」を使って横に並べるようにします。実際の横方向にスライドするループスライド動作スクリプトは以下の様になります。{selfWrap.resume();});}});});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。「slideSpeed」はリスト一つが横に移動する時間になり、スライド全体が移動するアニメーション時間はここで指定した値×リスト数となります。スピードを早めるには値を小さくし、ゆっくりさせる場合には値を大きくします。「setElm」で指定した要素がマスク的な役割をしその中に入る<ul>リスト要素全体を「.loopSliderWrap」の名前のブロック要素で覆い「left」の値を操作してアニメーションさせスライド移動させています。マウスオーバーでのストップ動作はjQueryアニメーションを一時停止、再開させることができる「jquery.pause.js」プラグインを使用しています。animationsマウスオーバーのストップ動作はスクリプトの34行目~38行目になるのでこの動作が不要な場合にはこの部分を削除し3行目で読み込んでいる「jquery.pause.js」プラグインファイル自体も読み込まないようにしてください。このスライドの全体構成に関して、もっと詳しい解説についてはこちらの書籍でも紹介させていただいております。続いて、縦方向にスライドするパターンの実装について。Webページに縦に並べられた要素が下から上へ流れ続けます。こちらの動作自体も横タイプと同様にただひたすら要素が下から上に流れ続けるシンプルなものです。横スライドパターン同様にスライド全体にマウスオーバーした際にはスライド動作を一時的に止め、マウスアウトするとスライドが再開します。全体構成について、HTMLは横スライドパターンと同じになるので説明は省略します。CSSは以下のように指定します。hidden;}CSSもほぼ横スライドパターンと同じですがこちらではリストに対して「float」などは指定しないで通常の縦並びにしておきます。HTML側でリスト全体を囲んだブロック要素「.loopSlider」には要素が縦方向にスライドする際の、表示する領域の幅と高さを指定します。実際の縦方向のループスライド動作スクリプトは以下の様になります。{selfWrap.resume();});}});});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。横スライドのパターンと同様に「slideSpeed」はリスト一つが縦に移動する時間になり、スライド全体が移動するアニメーション時間はここで指定した値×リスト数となります。スピードを早めるには値を小さくし、ゆっくりさせる場合には値を大きくします。「setElm」で指定した要素がマスク的な役割をしその中に入る<ul>リスト要素全体を覆う「.loopSliderWrap」の「top」の値を操作して縦方向にアニメーションさせスライド移動させています。マウスオーバーでのストップ動作は「jquery.pause.js」プラグインを使用します。マウスオーバーのストップ動作はスクリプトの34行目~38行目になるのでこの動作が不要な場合には3行目で読み込んでいる「jquery.pause.js」プラグインファイル自体も読み込まないようにしてください。このスライドの全体構成に関して、もっと詳しい解説についてはこちらの書籍でも紹介させていただいております。・書籍「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」出版についてhttp://black-flag.net/jquery/20160202-5926.html以上が横方向と縦方向の無限ループスライダーのシンプルな実装方法でした。注目させたい商品が複数ある場合や、Webページ上に並べたいバナーが数多くあるときなどユーザーの目を惹きつける意味でもこのようなループスライダーは効果的かと思っています。無限にループし続けるスライダーを設置する際にぜひ。画像上にテキストをつけて動かしたい場合はどうしたらいいでしょうか。11:13>fearonさんコメントありがとうございます。画像の上にテキストをつけるにはスクリプトにはとくに影響ありませんのでHTMLのリスト内にテキストを追加しCSSで配置位置などの調整をすることで実装可能です。