【Javascript】無限に横方向にスクロールするjQueryプラグイン

2017.07.11
CSS3アニメーションとFlexboxを使用した新バージョン「infiniteslide.js v2」を作成しました。
古いブラウザへの対応が不要な場合はぜひ新バージョンもご検討ください。

2013.09.09追記
マウスオーバーで停止するオプションを追加しました。jQuery Pauseプラグインを使用しています。

2013.06.13追記
Chromeで動作しなかったのを直しました。imgのwidth,heightは必須でした。

2013.03.27追記
自作プラグインなどはGitHubで公開・管理することにしました。
最新版はGitHubにあります。

デモと解説とダウンロード

OTAGGIOみたいなサイトがいい！なんて言われたので書きました。
当初はベタに書いてましたが、使いどころがいろいろありそうだったのでプラグイン化しました。

解説ページに大体のことは書いてますのでよろしければ参考にしてみてください。

ADs

HTML

div.classname>ul>li>img　で構成します。
この中のliが横並びになり、左右に無限にスクロールします。
CSSは不要ですが、ul,liのlist-style:noneだけは必要です。

<style>

ul,li {

list-style: none;

margin: 0;

padding: 0;

}

</style>

<ul>

</ul>

</div>

Javascript

対象となる要素に対してinfiniteslideメソッドを実行します。オプションは高さ、速さ、向きの3つというシンプル構成です。

速さを早くしすぎるとブラウザとPCスペックにもよりますが、コマ落ちしたりガタついたりしますのでゆっくりめがいいのではないかと思われます。

$(function(){

$('.infiniteslide1').infiniteslide({

'height': 400, //高さ

'speed': 30, //速さ

'direction' : 'left', //向き

'pauseonhover': true //マウスオーバーでストップ

});

アニメーションの滑らかさはFirefoxが一番ひどかった・・・・残念です・・・。

ADs

良いウェブサービスを支える「利用規約」の作り方

冷汗をかくようなトラブルとその対応・対策をシェアするサービス「Web制作者の（冷汗）」を公開しました

Post Comments コメントをキャンセル

Comments

はじめまして。いつも拝見させて勉強させて頂いております。
ありがとうございます。

一点ご質問ですがこちらのスクリプトですが、
jqueryの1.7系のバージョンですと、
クロームでは動かす事はできないのでしょうか？

さとる
2013年7月14日 7:19 PM

さとる　様
コメントいただきありがとうございます。
Chromeで動作しない件ですが、imgの幅や高さが取得できていないのかもしれません。
imgにwidth/height属性を記述するか、実行タイミングをwindowのloadにしてみるとどうでしょうか？

具体的には以下のような記述になります。
$(function(){
    $(window).on(‘load’,function(){
         $(‘.infiniteslide1’).infiniteslide({
         ‘height’: 400, //高さ
         ‘speed’: 30, //速さ
         ‘direction’ : ‘left’ //向き
         });
    });
});

管理人
2013年7月14日 8:19 PM

素晴らしいプラグインです！！
ありがとうございます。

所で何でデモが魚の画像なんですか？（笑

gnk
2014年1月30日 11:58 AM

gnkさま
コメントありがとうございます。

コードを書いていたときにたまたま居酒屋のサイト制作の仕事をしてまして、そのとき開いていた写真素材用のフォルダが魚シリーズでした。
なので特に意味があるものではありませんｗ

管理人
2014年1月30日 3:34 PM

素晴らしいプラグインですね。

とても勉強になります。

質問なのですが、safariでは表示されない（遅い？）のですが、どうしたら表示されますでしょうか？

たける
2014年3月3日 2:45 PM

たける　さま
コメントありがとうございます。

safariで動作しない件ですが、

・img要素にwidth/heightが入っているかどうか
・2つ上のコメントの$(window).on(‘load’,function(){…という記述にしてみてはどうか

という点ご確認いただけますでしょうか。
また、もしこれで動作しなければSafariのバージョン（スマートフォンの場合はOSのバージョン）を教えていただけましたら詳しく調べてみます。

管理人
2014年3月3日 3:40 PM

管理者様。

画像のimg要素にwidth/heightを入れたところ、safari(7.0.2)にてきちんと動作しました。その他のバージョンも問題なく動きました。

初歩的なことをテストせず質問して申し訳ありませんでした。

素早いご返信ありがとうございます！

たける
2014年3月4日 9:35 AM

今までは1ページに1つのループスライダーしか入れれなかったのですが
こちらのおかげで複数入れる事ができました。
しかもCSSもなくて簡単！ありがとうございました♪♪

まゆみ
2014年3月6日 4:05 PM

はじめまして、blueと申します。こちらのプラグインですが、一点、気になったのですが、順番にフェードインしてくるエフェクトは外せませんでしょうか？

ちらつきが非常に気になった為。

blue
2014年7月2日 10:24 PM

blue 様
コメントありがとうございます。

infiniteslide.js内のフェードインさせる処理を消して、単にappendするだけにすればフェードインはなくなります。

    //順番にフェードイン
    /*
    li.hide().each(function(key,value){
        $(this).delay(key*200).fadeIn(‘slow’,function(){
            $(this).clone().css(‘display’,’inline’).appendTo(ul);
        });
    });
    */

    //以下を追加
    li.clone().css(‘display’,’inline’).appendTo(ul);

また、アニメーション開始までの時間はフェードイン処理完了までの時間を計算してsetTimeoutで遅延させていますが、これも不要となります。

    //すべての画像が読み込み終わってからアニメーションスタート（いらないかも・・・）
    /*
    var delay = ul.children().size() * 210;
    setTimeout(function(){anim();},delay);
    */
    anim();

上記処理を適用したサンプルを用意しましたので参考にしてみてください。
https://wood-roots.com/sample/infiniteslide_sample/

JSファイルは
https://wood-roots.com/sample/infiniteslide_sample/infiniteslide.js
になります。

管理人
2014年7月3日 2:14 AM

管理人様

有り難う御座います。
私が実現したかった動作で御座います！！！

blue
2014年7月3日 9:44 AM

はじめまして。
素晴らしいプラグインで、ぜひ使わせて頂きたいのですが、
ライセンス形態は、どのようになっていますでしょうか？

商用利用（クライアント納品）での使用を考えているのですが、
ライセンスの表示が見つけられなかったもので
すでに掲載されているようでしたら大変失礼いたしました。

ki
2014年12月10日 6:12 PM

ki様
コメントありがとうございます。

ライセンスについてはきちんと考えてませんでした（汗）

jQueryと同じくMITライセンスでお願いします。

infiniteslide.js本体にも追記しました。
※と言っても以下の2行だけですが。
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php

管理人
2014年12月10日 8:08 PM

管理人様

お返事ありがとうございます。

MITライセンスとのことで、大変助かります。
ぜひ使わせて頂ければと思います。

ki
2014年12月12日 4:33 PM

はじめまして。
いつも拝見させていただいております。

質問なんですが、スライドする画像をランダム表示にすることは可能ですか？

たな
2015年2月25日 4:39 PM

たな様
コメントありがとうございます。

プラグインの機能としてはランダムにはできないのですが、infiniteslide関数を実行する前にul>liをランダムに並び替えてから実行すればいいと思います。

だとして

$(function() {
    //ランダムに並び替える処理
    //参考：http://www.finefinefine.jp/web/kiji2068/
    var arr = [];
    $(“.infiniteslide1 ul li”).each(function() {
        arr.push($(this).html());
    });
    arr.sort(function() {
        return Math.random() – Math.random();
    });
    $(“.infiniteslide1 ul”).empty();
    for(i=0; i < arr.length; i++) {
        $(".infiniteslide1 ul").append('’ + arr[i] + ”);
    }

    //並び替えてからinfiniteslide実行
     $(‘.infiniteslide1’).infiniteslide({
     ‘height’: 400, //高さ
     ‘speed’: 30, //速さ
     ‘direction’ : ‘left’, //向き
     ‘pauseonhover’: true //マウスオーバーでストップ
     });
});

管理人
2015年2月25日 4:59 PM

はじめまして、自動ループで軽量のなもの探しており、DLさせていただきました。
素晴らしいプラグインですね！
当方はデザイン・コーディングのみなので大変助かりました。（勉強止まりです汗）
また、MITライセンスなのも柔軟に利用でき重宝しております。
個人案件での想定ですが、是非使用させていただきます！

ありがとうございました！

cenation
2016年2月2日 4:00 AM

こんにちは。とっても便利なプラグインをありがとうございます！
1点質問させてください。
全ての写真が流れた後、また最初の写真に戻る瞬間があるのですが、これをスムーズにループできますでしょうか？
宜しくお願いします。

michi
2016年2月17日 11:53 AM

michi　さま
コメントありがとうございます。

横幅に対してliの個数が少ないからでしょうか？
もし支障がなければ現象が起きているページをお伝えいただければ、もう少し詳しく調べてみることもできます。

管理人
2016年2月19日 5:54 PM

ご返信いただきありがとうございます！たしかに現在４枚しか写真を使用していないので、少ないかもしれません。。

＞現象が起きているページをお伝えいただければ
ありがとうございます！現在dev環境にて実装しておりまして、お見せできないのが残念なのですが、画像を増やし、本番環境でも同じ現象でしたら改めて相談させてください。
どうぞ宜しくお願いいたします。

michi
2016年2月24日 5:29 PM

【Javascript】無限に横方向にスクロールするjQueryプラグイン | Wood-Roots:blog