以前にここで「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」と題して、
jQueryでの画像切替ビューアーを紹介しましたが、
これを応用して、自動で画像エリアが切り替わる
シンプルな画像スライドショーを作ってみたのでご紹介。
まずは動作のサンプルから。
※全体構成は以前の記事の物と同じにしてあります。
jQuery SIMPLE SLIDESHOW【SAMPLE1】
4枚の画像が自動でクロスフェードしてスライドショーとして切り替わり、
下部に並べてあるサムネイルをクリックすることで
特定のビジュアルに切り替えることも出来ます。
全体構成についてHTMLから。
◆HTML <div id="slideshow"> <div> <div><a href="#1"><img src="img/photo01.jpg" width="400" height="300" alt="" /></a></div> <div><a href="#2"><img src="img/photo02.jpg" width="400" height="300" alt="" /></a></div> <div><a href="#3"><img src="img/photo03.jpg" width="400" height="300" alt="" /></a></div> <div><a href="#4"><img src="img/photo04.jpg" width="400" height="300" alt="" /></a></div> </div> <ul> <li><a href="javascript:void(0);"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li> <li><a href="javascript:void(0);"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li> </ul> </div><!--/#slideshow-->
大枠をID「#slideshow」で覆い（ID名は任意）
画像が切り替わるメインビジュアル部分は
全体を＜div＞で囲んだ後、
切り替える個々のエリアを同じく＜div＞で囲います。
サムネイルは＜li＞リストで形成し、
切り替えるメインビジュアルとサムネイルの並び（順序）は
同じにしておく必要があります。
メインビジュアルで使用する画像も、サムネイル画像に対しても
HTML側ではIDやクラスはつけていません。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
#slideshow {
margin: 0 auto;
width: 400px;
text-align: left;
}
#slideshow div {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
#slideshow div div {
top: 0;
left: 0;
position: absolute;
}
#slideshow ul {
width: 400px;
}
#slideshow ul li {
width: 100px;
float: left;
display: inline;
}
#slideshow .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#slideshow ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#slideshow ul {
display: inline-block;
overflow: hidden;
}
メインビジュアル部分の「#slideshow div」と「#slideshow div div」と
サムネイルの透過具合を制御する「#slideshow .active」以外に書かれている
各プロパティはサンプル画面のレイアウトを形成するものなので
あまり重要視しなくていいものになります。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var setId = '#slideshow';
var fadeTime = 1000;
var delayTime = 5000;
$(setId + ' div div').each(function(i){
$(this).attr('id','view' + (i + 1).toString());
$(setId + ' div div').css({zIndex:'98',opacity:'0'});
$(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
});
$(setId + ' ul li').click(function(){
clearInterval(setTimer);
var connectCont = $(setId + ' ul li').index(this);
var showCont = connectCont+1;
$(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
$(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});
$(this).addClass('active');
$(this).siblings().removeClass('active');
timer();
});
$(setId + ' ul li:not(.active)').hover(function(){
$(this).stop().animate({opacity:'1'},200);
},function(){
$(this).stop().animate({opacity:'0.5'},200);
});
$(setId + ' ul li').css({opacity:'0.5'});
$(setId + ' ul li:first').addClass('active');
timer();
function timer() {
setTimer = setInterval(function(){
$('li.active').each(function(){
var listLengh = $(setId + ' ul li').length;
var listIndex = $(setId + ' ul li').index(this);
var listCount = listIndex+1;
if(listLengh == listCount){
$(setId + ' ul li:first').click()
} else {
$(this).next('li').click();
};
});
},delayTime);
};
});
</script>
メインビジュアル部分の＜div＞数に対して、それぞれ順番にIDを付け、
サムネイルの＜li＞の順序番号と連動させて
メインビジュアルIDの表示を切り替える構成になっています。
（この辺りの構成は以前の記事と同じ内容になっています。）
スクリプト開始部分にある
——————————————————————–
var setId = ‘#slideshow’;
var fadeTime = 1000;
var delayTime = 5000;
——————————————————————–
は上から
——————————————————————–
・該当するエリアのID名
・フェードで切り替わる際の時間
・エリアが切り替わるまでの待機時間
——————————————————————–
となっているので、
値を変更するだけでカスタマイズが可能です。
こういったスライドショーは、場合によって
マウスオーバーでスライドショー動作（自動切替）を停止させた方が
ユーザーに優しい場合があるので、
それらの動作を追加する場合は以下のスクリプトを追加します。
◆SCRIPT
hoverでスライド動作ストップ
$(setId).mouseover(function(){
clearInterval(setTimer);
}).mousemove(function(){
clearInterval(setTimer);
}).mouseout(function(){
timer();
});
この動作を追加したパターンは
以下の様になります。
jQuery SIMPLE SLIDESHOW【SAMPLE2】
スライドショーエリア（サムネイル含む）にマウスオーバーしている間は
自動で切り替わるスライドショー動作がストップします。
HTMLやスクリプトはそのままでCSSを変更するだけで、
ビジュアルエリアとサムネイルを重ね合わせた
以下の様なレイアウトパターンも簡単に実装できます。
jQuery SIMPLE SLIDESHOW【SAMPLE3】
HTMLとCSSを極力シンプルな形ですむように構成してあるので
さまざまなレイアウトパターンでスライドショーを実装することができると思います。
jQueryでのスライドショーが必要になった際に是非。。。