今回は、jQueryでスライドショーを実装。
使っているメソッドは・・・
・ 条件に一致する要素に対して繰り返し処理をする『.each()』
・ 子孫の要素まで探してくる『.find()』
・ 指定した要素から一致する●番目の要素を探してくる『.eq()』
・ 指定した要素を別の要素に追加する『.appendTo()』
・ 要素をふわっと非表示にする『.fadeOut()』
・ 要素をふわっと表示する『.fadeIn()』
以上６つを使ってます。
一定時間で画像が切り替わるスライドショーを仕上げたので備忘録。
webサイトのトップページや写真やカタログサイトで画像が自動的に入れ替わる部分をイメージで作りました。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1. スライドショーを作る。
STEP1-1. 要素を画面に作成する
さっそく画像を表示した画面を作成します。
今回は３枚の画像を使って、一定時間で１枚目を非表示になったら２枚目を表示、非表示になったら３枚目を表示、非表示といった動作を繰り返しする動作をさせます。
順番に表示・非表示にするために、２枚目と３枚目の画像はページを表示したときは非表示にしておきます。
それでは見た目の調整をいれたcssも含め、htmlファイルに記述します。
以下、htmlファイルの中身です。↓
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
.img{
position: absolute;
}
.img_a{
display: none;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div id="slide">
<img src="./img/jq24/img1.jpg" alt="" class="img img_s">
<img src="./img/jq24/img2.jpg" alt="" class="img img_a">
<img src="./img/jq24/img3.jpg" alt="" class="img img_a">
</div>
</div>
ここまでだと、次の画像のように表示されている状態になっていると思います。↓
画面が作成できたら、続いてjQueryを記述するjsファイルを作っていきます。
jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. スライドショーを作る
jQueryでスライドショーを作っていきます。
ここで『.each()』メソッド、『.find()』メソッド、『.eq()』メソッド、『.appendTo()』メソッド、『.fadeOut()』メソッド、『.fadeIn()』メソッドを組み合わせて使います。
※『.each()』メソッドについては、過去記事「jQueryでクリックした時にマス目の色を変更する〔.each( )〕」も参考にしてみてください。
※『.find()』メソッドについては、過去記事「jQueryで指定した要素を取得する〔.find( )〕」も参考にしてみてください。
※『.fadeOut ()』メソッド・『.fadeIn()』メソッドについては、過去記事「jQueryで要素をふわっと表示・非表示にする」も参考にしてみてください。
動作の流れは、
1. 『.each()』メソッドで処理の繰り返しを指定し、
2. 画像を探してきた結果の変数と、●番目の要素を入れた変数を作り、
3. １番目の画像を非表示にしたら。
4. 2番目の画像を表示する。これを３秒ごとに繰り返す。
といった感じです。
上記に合った動作をさせるためにさっそく、以下の内容を「sample.js」に記述します。
//スライドショー
$(function(){
$('#slide').each(function(){
var slider = $(this);
function swichImg(){
var images = slider.find('img');
var first = images.eq(0);
var second = images.eq(1);
first.appendTo(slider).fadeOut();
second.fadeIn();
};
setInterval(swichImg, 3000);
});
});
どうですか？
次の画像みたいに３秒ごとに切り替わっていたらOKです。
※画像が切り替わらない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓
デモサイト
