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

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

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

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

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

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

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

AD

HTML

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

Javascript

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

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

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

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

一点ご質問ですがこちらのスクリプトですが、
jqueryの1.7系のバージョンですと、
クロームでは動かす事はできないのでしょうか?
管理人 さんより
さとる 様
コメントいただきありがとうございます。
Chromeで動作しない件ですが、imgの幅や高さが取得できていないのかもしれません。
imgにwidth/height属性を記述するか、実行タイミングをwindowのloadにしてみるとどうでしょうか?

具体的には以下のような記述になります。
$(function(){
$(window).on('load',function(){
        $('.infiniteslide1').infiniteslide({
                'height': 400, //高さ
                'speed': 30, //速さ
                'direction' : 'left' //向き
        });
});
});
gnk さんより
素晴らしいプラグインです!!
ありがとうございます。

所で何でデモが魚の画像なんですか?(笑
管理人 さんより
gnkさま
コメントありがとうございます。

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

とても勉強になります。

質問なのですが、safariでは表示されない(遅い?)のですが、どうしたら表示されますでしょうか?
管理人 さんより
たける さま
コメントありがとうございます。

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

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

という点ご確認いただけますでしょうか。
また、もしこれで動作しなければSafariのバージョン(スマートフォンの場合はOSのバージョン)を教えていただけましたら詳しく調べてみます。
たける さんより
管理者様。

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

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

素早いご返信ありがとうございます!
まゆみ さんより
今までは1ページに1つのループスライダーしか入れれなかったのですが
こちらのおかげで複数入れる事ができました。
しかもCSSもなくて簡単!ありがとうございました♪♪
blue さんより
はじめまして、blueと申します。こちらのプラグインですが、一点、気になったのですが、順番にフェードインしてくるエフェクトは外せませんでしょうか?

ちらつきが非常に気になった為。
管理人 さんより
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();


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

JSファイルは
http://wood-roots.com/sample/infiniteslide_sample/infiniteslide.js
になります。
blue さんより
管理人様

有り難う御座います。
私が実現したかった動作で御座います!!!
ki さんより
はじめまして。
素晴らしいプラグインで、ぜひ使わせて頂きたいのですが、
ライセンス形態は、どのようになっていますでしょうか?

商用利用(クライアント納品)での使用を考えているのですが、
ライセンスの表示が見つけられなかったもので
すでに掲載されているようでしたら大変失礼いたしました。
管理人 さんより
ki様
コメントありがとうございます。

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

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

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

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

MITライセンスとのことで、大変助かります。
ぜひ使わせて頂ければと思います。
たな さんより
はじめまして。
いつも拝見させていただいております。

質問なんですが、スライドする画像をランダム表示にすることは可能ですか?
管理人 さんより
たな様
コメントありがとうございます。

プラグインの機能としてはランダムにはできないのですが、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 //マウスオーバーでストップ
        });
});
cenation さんより
はじめまして、自動ループで軽量のなもの探しており、DLさせていただきました。
素晴らしいプラグインですね!
当方はデザイン・コーディングのみなので大変助かりました。(勉強止まりです 汗)
また、MITライセンスなのも柔軟に利用でき重宝しております。
個人案件での想定ですが、是非使用させていただきます!

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

横幅に対してliの個数が少ないからでしょうか?
もし支障がなければ現象が起きているページをお伝えいただければ、もう少し詳しく調べてみることもできます。
michi さんより
ご返信いただきありがとうございます!たしかに現在4枚しか写真を使用していないので、少ないかもしれません。。

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