先日、とある案件で必要になり、jQueryを使って作成した、
コンテンツ要素を自動でスライドさせるサムネイル要素付きのスライダーが
今後も他でいろいろ使いまわせそうだったので、ここでも軽くスクリプトを紹介してみます。
まずは動作のサンプルから。
jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法
指定した間隔（時間）で一つずつ画像（コンテンツ要素）がスライドします。
スライド箇所の下にサムネイルを配置し、マウスオーバーすることで
該当箇所へ任意にスライドさせることができます。
サムネイル部分にマウスオーバーしている間は、
メイン部分の自動スライドの動作は停止します。
この動作の全体構成について、
HTMLから。
◆HTML <div id="slider_main"> <ul> <li><img src="img/photo01.jpg" width="400" height="300" alt="" /></li> <li><img src="img/photo02.jpg" width="400" height="300" alt="" /></li> <li><img src="img/photo03.jpg" width="400" height="300" alt="" /></li> <li><img src="img/photo04.jpg" width="400" height="300" alt="" /></li> </ul> </div><!--/#slide_main--> <div id="slider_thumb"> <ul> <li><img src="img/photo01.jpg" width="50" height="50" alt="" /></li> <li><img src="img/photo02.jpg" width="50" height="50" alt="" /></li> <li><img src="img/photo03.jpg" width="50" height="50" alt="" /></li> <li><img src="img/photo04.jpg" width="50" height="50" alt="" /></li> </ul> </div><!--/#slide_thumb-->
上部の＜div id=”slider_main”＞がメイン部分にあたるソースになり、
下部の＜div id=”slider_thumb”＞がサムネイル部分になります。
２つの＜div＞の中にはそれぞれにリストを入れ込みます。（ID名は変更可能）
HTMLはメイン用とサムネイル用の＜div＞と＜ul＞リストを用意するのみです。
リストの数はいくつでも増減可能です。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
/* #slider_main
--------------------------- */
#slider_main {
margin: 0 auto;
width: 400px;
height: 300px;
text-align: left;
position: relative;
overflow: hidden;
}
#slider_main ul {
top: 0;
left: 0;
position: absolute;
overflow: hidden;
}
#slider_main ul li {
width: 400px;
height: 300px;
float: left;
display: inline;
overflow: hidden;
}
/* #slider_thumb
--------------------------- */
#slider_thumb {
margin: 10px auto;
width: 400px;
height: 50px;
text-align: center;
}
#slider_thumb ul {
display: inline;
}
#slider_thumb ul li {
cursor: pointer;
display: inline;
}
#slider_thumb ul li.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#slider_main ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#slider_main ul {
display: inline-block;
overflow: hidden;
}
CSSはあまり複雑に凝ったことはせず
メイン部分では幅や高さを指定して「overflow:hidden」をつけて
中に入るリストをfloatさせます。
サムネイル部分のレイアウトはどのようにも変更可能ですが
＜li＞要素に「cursor: pointer;」を付けることと
アクティブ状態を形成する「li.active」の部分は最低限必要な箇所になります。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var setMainId = '#slider_main';
var setThumbId = '#slider_thumb';
var slideTime = 1000;
var delayTime = 5000;
$(setMainId).each(function(){
var sliderWidth = $(this).width();
var sliderHeight = $(this).height();
var listWidth = parseInt($(this).children('ul').children('li').css('width'));
var listCount = $(this).children('ul').children('li').length;
var ulWidth = (listWidth)*(listCount);
$(setMainId + ' ul').css({
width: (ulWidth),
height: (sliderHeight)
});
$(setThumbId + ' ul li:first').addClass('active');
$(setThumbId + ' ul li').css({opacity:'0.7'});
$(setThumbId + ' ul li').hover(function(){
clearInterval(setTimer);
$(this).stop().animate({opacity:'1'},300);
var connectCont = $(setThumbId + ' ul li').index(this);
$(setMainId + ' ul').stop().animate({left:(-(sliderWidth)*(connectCont))},slideTime);
$(setThumbId + ' ul li').removeClass('active');
$(this).addClass('active');
},function(){
$(this).stop().animate({opacity:'0.7'},300);
timer();
});
timer();
function timer() {
setTimer = setInterval(function(){
$(setMainId + ' ul').each(function(){
var moveLeft = parseInt($(this).css('left'));
var listLengh = $(setThumbId + ' ul li').length;
var listWidth = parseInt($(setMainId + ' ul li').css('width'));
var moveLengh = -((listWidth)*((listLengh)-1));
if(moveLeft == moveLengh){
$(setMainId + ' ul').stop().animate({left:'0'},slideTime);
$(setThumbId + ' ul li.active').each(function(){
$(this).removeClass('active');
$(setThumbId + ' ul li:first').addClass('active');
});
}else{
$(setMainId + ' ul').stop().animate({left:'-=' + (sliderWidth)},slideTime);
$(setThumbId + ' ul li.active').each(function(){
$(this).removeClass('active');
$(this).next().addClass('active');
});
}
});
},delayTime);
};
});
});
</script>
メイン部分の＜div＞要素の幅と高さの値を元に
スライドさせる＜ul＞の幅やスライドさせる距離など計算しています。
スクリプト開始部分にある
————————————————
var setMainId = ‘#slider_main’;
var setThumbId = ‘#slider_thumb’;
var slideTime = 1000;
var delayTime = 5000;
————————————————
は上から
————————————————
・該当するメインエリアのID名
・該当するサムネイルエリアのID名
・スライド動作で切り替わる際の時間
・次のスライド動作が実行されるまでの待機時間
————————————————
となっているので、
値を変更することでカスタマイズが可能です。
スライドさせる要素は＜li＞リスト要素になっているので
画像のみではなく、テキストやリンクなども配置することができます。
サムネイル箇所を黒丸「●」のような画像にすることで
ページネーション的な見せ方にすることも。
スライドさせる動作以外、汎用性はあまりない作りになっていますが
サイトのトップページなどで複数枚の画像をスライドさせる時など
シンプルに使えるかと思っています。
自動でスライドするコンテンツスライダーが必要になった際に是非。。