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

読了時間:約 17分18秒

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

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

 

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

デモ


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

 

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

 

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

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

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

[js](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({
//設定
});
});[/js]

 

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

[js](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]

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

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

 

プラグインの使い方

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

 

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

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

 

 

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

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

[html]<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>[/html]

 

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

[js](function ($) {
$(document).ready(function () {
$(‘#slideIn’).autoSlide();
});
})(jQuery);[/js]

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

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

 

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

 

HTML

[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>[/html]

 

CSS

[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;
}[/css]

 

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

 

ダウンロードはこちら

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

 

ダウンロードplugin-autoslide.zip

 

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

RSSフィードを購読する

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

シェアする

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

関連記事

コメント

お仕事のご依頼について

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

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

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

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

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

各ブログのカスタマイズ

 

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

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

プロフィール

菊地翼

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

詳しくはこちら 

サイト内検索