jQueryで自動再生・自動スクロールするスライドショーをつくってみた

読了時間:約 18分16秒

jQueryで自動再生・自動スクロールするスライドショーをつくってみた

自動再生・自動スクロールするシンプルなスライドショーが欲しかったので、jQueryで自作してみました。

 

WordPressでも、普通の静的サイトでも、どちらでも使いやすいようにしてみたので、もし気に入ったら使ってみてください。

デモ

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

 

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

 

実装方法

まず下記のJavaScriptを外部ファイルとして保存し、適切なディレクトリにアップロードしてください。

 

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]

 

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]

 

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

スライドする方向や速さを変えるには、 autoslide.js の76〜78行目を書き換えます。

 

くわしく解説

スライドが最後まで移動したら最初の位置に戻し、またアニメーションする、という動きにしています。

 

autoslide.jsファイルの中身は下記です。

[js](function($){
//autoSlide 始め
function AutoSlide(parameter){
var param = $.extend({
target:”, //スライドするIDを設定
course:’left’,//left or right or top or bottom を設定 デフォルトはleft
speed:10000 //1回のアニメーションにかける時間
},parameter);

if (!(this instanceof AutoSlide)){//newから生成していなければnewで生成
return new AutoSlide(param);
}

var $target = $(param.target),//target jQuery化
childWidth = $(param.target).children().eq(0).outerWidth(true),//子供の横(アキ付)取得
childHeight = $(param.target).children().eq(0).outerHeight(true),//子供の縦(アキ付)取得
childLength = $(param.target).children().length;//子供数取得

$target.children().clone().appendTo($target);//targetの子供複製

var autoSlideInit = function(){//動きなど表示している本体のセット
var courseData = function(course,type){//courseを見て【大きさ(横or縦)/位置/移動距離】の値を取得
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();
};
autoSlideInit();
}
//autoSlide 終わり

//autoSlide 実行
$(document).ready(function(){
var _autoSlide = AutoSlide({
target:’#slideIn’,//スライドするIDを設定
course:’left’,//left or right or top or bottom を設定 デフォルトはleft
speed:40000//1回のアニメーションにかける時間
});
});
})(jQuery);[/js]

 

スライドする時の想定は、

「同じ大きさのボックスが並んでいて、それを囲んでいる親を絶対配置で動かす」

としました。

 

htmlの書き方にもよりますが、動かすスライドの直下に子のオブジェクトがあれば、意外と簡単にいけそうですね。

 

まずはjQueryプラグインではなく、普通の関数として書いてみました。

(近いうちに、プラグイン化にも挑戦しますね!)

 

WordPressで組み込まれるjQueryの本体は、$を使用した他のJavaScriptライブラリとの衝突をさけるために jQuery.noConflict(); にしています。

 

こうなっているとjQueryの一般的な書き方「$」を「jQuery」に置き換えないと動きません。

 

しかし、全部を置き換えると面倒なので、以下の書き方にします。

[js](function($){・・・})(jQuery);[/js]

 

この書き方だと、この中では$が普通に使えるので、・・・の中にスライドさせる関数を書いていきます。

 

とりあえず名前をAutoSlideとしました。

[js]function AutoSlide(parameter){}[/js]

 

そして、下記のパラメータを使用者が自由に変えられるようにしました。

  • スライドさせるID(#slideのようにhtmlのidをつける)
  • 方向(右だけ左だけだと面白くないので、右左上下を選べるように)
  • アニメーションにかける時間(当然動きの早さも変えたいですよね)

 

のちにパラメーターを増やしたり減らしたり、または名前を分かりやすくしたりできるように引数を連想配列にしました。

 

4行目〜8行目: 初期値を設定することで、あとでパラメーターを忘れてしまっても、分かりやすいようにしました。

[js]var param = $.extend({
target:”, //スライドするIDを設定
course:’left’,//left or right or top or bottom を設定 デフォルトはleft
speed:10000 //1回のアニメーションにかける時間
},parameter);[/js]

 

10行目〜12行目: 今後拡張することを考えて、newを利用しました。

(今回は、newについての説明は割愛します。JavaScriptのnewの挙動について興味がある方は、他のサイトで詳しく書かれているので調べてみてください。)

[js]if (!(this instanceof AutoSlide)){//newから生成していなければnewで生成
return new AutoSlide(param);
}[/js]

 

14行目〜17行目: あらかじめ使いまわす記述はまとめます。

[js]var $target = $(param.target),//target jQuery化
childWidth = $(param.target).children().eq(0).outerWidth(true),//子の横(アキ付)取得
childHeight = $(param.target).children().eq(0).outerHeight(true),//子の縦(アキ付)取得
childLength = $(param.target).children().length;//子の数取得[/js]

 

19行目: 複製してループしたときに切れないようにします。

[js]$target.children().clone().appendTo($target);//targetの子の複製[/js]

 

21行目〜68行目: 動きに関することは

[js]var autoSlideInit = function(){};[/js]

にまとめました。

 

22行目〜57行目: 方向に関する記述は似てくるので、

[js]var courseData = function(course,type){};[/js]

にまとめました。

 

58行目〜63行目: アニメーションは

[js]var animeTimer = function(){};[/js]

にまとめました。

 

74行目〜80行目: これで実行できます。

[js]$(document).ready(function(){
var _autoSlide = AutoSlide({
target:’#slideIn’,//スライドするIDを設定
course:’left’,//left or right or top or bottom を設定 デフォルトはleft
speed:40000//1回のアニメーションにかける時間
});
});[/js]

76行目〜78行目のパラメーターは、お好みで変更することができます。

 

 

新年最初の投稿が、思いもよらず長文になってしまいましたが(笑)、本年もよろしくお願いします!

RSSフィードを購読する

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

シェアする

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

関連記事

コメント

お仕事のご依頼について

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

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

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

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

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

各ブログのカスタマイズ

 

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

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

プロフィール

菊地翼

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

詳しくはこちら 

サイト内検索