jQueryでプラグインを作ってみよう!(自動再生・自動スクロールするスライドショープラグイン)

読了時間:約 17分16秒
jQueryでプラグインを作ってみよう!(自動再生・自動スクロールするスライドショープラグイン)

以前「jQueryで自動再生・自動スクロールするスライドショーをつくってみた」という記事を書きましたが、これを誰でも使えるようにプラグイン化してみました。

 

プラグインを作るのは意外と簡単ですので、現在jQueryを勉強中の人も参考にしてみてください。

デモ

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

 

左右のスクロール方向を変えたり、縦スクロールもいけます!

 

プラグインを作ってみよう

まずは、プラグインのひな形を用意します。

細かい書き方の違い、好みの問題などありますが、大体以下のような構成でプラグインはできています。

(function ($) {
    
    //Pluginの名前
    var name_space = 'pluginName';
    
    //Plugin開始
    $.fn[name_space] = function (parameter) {
        
        //自分退避
        var elements = this;
        
        //設定情報の構築
        var param = $.extend({
            //内容
        }, parameter);
        
        //内部用メソッド
        var innerMethod = function(){
           //内容
        };
  
       //要素を一個ずつ処理
        elements.each(function () {
            //実行
           innerMethod();
        });
        //メソッドチェーンを切らないので
        return this;
    };
    
})(jQuery);

$(document).ready(function(){
 $('ID名など').pluginName({
  //設定
 });
});

 

ここに、前回書いたスクリプトを置いていけば、プラグインが完成するのでやってみましょう。

(function ($) {
    //Pluginの名前
    var name_space = 'autoSlide';
    //Plugin開始
    $.fn[name_space] = function (parameter) {
        //自分退避
        var elements = this;
        //設定情報の構築
        var param = $.extend({
            //parameterの初期値を設定
            course: 'left', //left or right or top or bottom を設定 デフォルトはleft
            speed: 10000 //1回のアニメーションにかける時間
        }, parameter);
        //内部用メソッド
        var innerMethod = function ($target) {
            var childWidth = $target.children().eq(0).outerWidth(true), //子供の横(アキ付)取得
                childHeight = $target.children().eq(0).outerHeight(true), //子供の縦(アキ付)取得
                childLength = $target.children().length; //子供数取得
            $target.children().clone().appendTo($target); //targetの子供複製
            //courseを見て【大きさ(横or縦)/位置/移動距離】の値を取得
               var courseData = function(course,type){
                 var size = {},
                  position = {},
                  direction = {};
                 switch (course){
                 case 'left'://左へ移動
                    position = {left:0};//初期位置(0からスタート)
                    size = {width:childWidth * childLength * 2};//横幅を長くする(スクロール用に複製したので幅*2)
                    direction = {left:childWidth * childLength * -1};//移動位置(子供の横幅*子供の数*マイナス移動(left方向))
                 break;
                 case 'right'://右へ移動
                    position = {left:childWidth * childLength * -1};//初期位置(子供の横幅*子供の数*マイナス)
                    size = {width:childWidth * childLength * 2};//横幅を長くする(スクロール用に複製したので幅*2)
                    direction = {left:0};//移動位置(0になるまで移動)
                 break;
                 case 'top'://上へ移動
                    position = {top:0};//初期位置(0からスタート)
                    size = {height:childHeight * childLength * 2};//縦幅を長くする(スクロール用に複製したので幅*2)
                    direction = {top:childHeight * childLength * -1};//移動位置(子供の縦幅*子供の数*マイナス移動(top方向))
                 break;
                 case 'bottom'://下へ移動
                    position = {top:childHeight * childLength * -1};//初期位置
                    size = {height:childHeight * childLength * 2};//縦幅を長くする(スクロール用に複製したので幅*2)
                    direction = {top:0};//移動位置(0になるまで移動)
                 break;
                 };
                 if (type == 'size'){//typeがsizeだったらsizeを返す
                  return size;
                 }
                 if (type == 'position'){//typeがpositionだったらpositionを返す
                  return position;
                 }
                 if (type == 'direction'){//typeがdirectionだったらdirectionを返す
                  return direction;
                 }
               };
            var animeTimer = function () { //アニメーションする
                $target.animate(courseData(param.course, 'direction'), param.speed, 'linear', function () {
                    $target.css(courseData(param.course, 'position')); //初期位置に戻す
                    animeTimer(); //終了したらもう一度再生
                });
            };
            $target.css(courseData(param.course, 'size')) //初期位置を設定する
            .css(courseData(param.course, 'position')); //幅を設定する
            animeTimer();
        };
        //要素を一個ずつ処理
        elements.each(function () {
            var $target = $(this); //target jQuery化
            innerMethod($target); //実行
        });
        //メソッドチェーンを切らないので
        return this;
    };
})(jQuery);

こうして見てみると、前回書いたスクリプトとほとんど変わっていません。

でもプラグイン化したことで、だれでも簡単に使えるようになりました!

 

プラグインの使い方

スクリプトをjsファイルとしてアップロードし、それをHTMLで読み込んであげればOKです。

 

今回は、「autoslide.js」というファイル名にしました。

autoslide.js ←ダウンロードしてください(直リンクはご遠慮ください)

 

 

htmlファイルのhead要素内に下記を記述して、jQueryとautoslide.jsを読み込みます。

( js/autoslide.js は適切なパスに書き換えてください。)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/autoslide.js"></script>

 

そして、下記のスクリプトをheadの中などに記述します。

(function ($) {
    $(document).ready(function () {
        $('#slideIn').autoSlide();
    });
})(jQuery);

もし、スライドする方向や速さを変えるには、下記のように書くことで指定できます。

(function ($) {
    $(document).ready(function () {
        $('#slideIn').autoSlide({
            course: 'left', //left or right or top or bottom を設定 デフォルトはleft
            speed: 40000 //1回のアニメーションにかける時間
        });
    });
})(jQuery);

 

htmlとcssは下記のように記述します。

 

HTML

<div id="slide">
	<ul id="slideIn">
		<li><img src="1.jpg" alt="1" /></li>
		<li><img src="2.jpg" alt="2" /></li>
		<li><img src="3.jpg" alt="3" /></li>
		<li><img src="4.jpg" alt="4" /></li>
		<li><img src="5.jpg" alt="5" /></li>
	</ul>
</div>

 

CSS

*{list-style:none; margin:0; padding:0;}

#slide {
	width:320px;/*表示の範囲です。中の要素によって適宜変えてください*/
	height:100px;/*表示の範囲です。中の要素によって適宜変えてください*/
	overflow:hidden;/*普通に考えるとoverflow:hidden;は必要です*/
	position:relative;/*スライドが絶対配置で移動するので、positionはrelativeである必要があります*/
	margin:0 auto;
}
#slideIn {
	position:absolute;/*スライドが絶対配置で移動するので、positionはabsoluteである必要があります*/
	left:0;/*必要です*/
	top:0;/*必要です*/
}
#slide li {
	float:left;/*横移動する場合は、あらかじめloat:left;しておきます*/
	width:100px;
	height:100px;
	margin-right:10px;
}

 

これで使えるようになります!

 

ダウンロードはこちら

プラグイン化したデータは、下記のリンクからダウンロードできます。ご自由にお使いください。

 

ダウンロードplugin-autoslide.zip

 

この記事が、サイト制作のお役に立てれば幸いです!

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加
Clip to Evernote

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴16年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索

Facebookページ

Twitter