Webサイト上でバナーや商品のサムネイル画像などの見せ方として、並べられた画像（コンテンツ要素）を一定のスピードで自動でスライドして、無限ループさせているものをたまに見かけます。
そんなビューアー的役割のコンテンツ無限ループスライダーを作ってみたので紹介してみます。
まずは動作のサンプルから。
jQuery LOOPSLIDER【SAMPLE】
10個並べてある画像が自動でスライドし、無限にループしています。
この動作の全体構成について、HTMLから。
◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo03.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo04.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo05.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo06.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo07.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo08.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo09.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo10.jpg" width="100" height="100" alt="" /></a></li> </ul> </div><!--/#loopslider-->
大枠を任意のIDで覆い（サンプルでは「#loopslider」とします）、そのブロック要素に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
スライドさせるコンテンツ要素を増やしたり減らしたりする時には、HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
#loopslider {
margin: 0 auto;
width: 500px;
height: 100px;
text-align: left;
position: relative;
overflow: hidden;
}
#loopslider ul {
height: 100px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider ul li {
width: 100px;
height: 100px;
float: left;
display: inline;
overflow: hidden;
}
/* =======================================
ClearFixElements
======================================= */
#loopslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#loopslider ul {
display: inline-block;
overflow: hidden;
}
全体を囲むブロック要素「#loopslider」の値をループスライダーの表示領域としています。
中に入る＜ul＞はスクリプト側でもう一つクローンを作って、同じ＜ul＞を2つを並べる構成になるので、CSSでは「float:left;」で回り込み指定をしています。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆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(){
$('#loopslider').each(function(){
var loopsliderWidth = $(this).width();
var loopsliderHeight = $(this).height();
$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');
var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
var listCount = $('#loopslider_wrap').children('ul').children('li').length;
var loopWidth = (listWidth)*(listCount);
$('#loopslider_wrap').css({
top: '0',
left: '0',
width: ((loopWidth) * 2),
height: (loopsliderHeight),
overflow: 'hidden',
position: 'absolute'
});
$('#loopslider_wrap ul').css({
width: (loopWidth)
});
loopsliderPosition();
function loopsliderPosition(){
$('#loopslider_wrap').css({left:'0'});
$('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},25000,'linear');
setTimeout(function(){
loopsliderPosition();
},25000);
};
$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
});
});
</script>
4行目にある「#loopslider」がスクリプトを実行させるID名になるので、HTML側で全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
スライドさせるスピードは＜ul＞全体が「#loopslider」の端から端まで何秒で移動するか、が速度設定になっているので、上記スクリプトの中盤下あたりの「function loopsliderPosition()」にある「25000」の値２つを変更させることでスピードの調節が可能になります。（ここの２つの値は常に同じ値で）
マーキーと同じような動作ではありますが、この様なコンテンツ要素を常にスライドさせることでサイト内で目を惹くおもしろい動きも実装することが出来るかな、とも感じています。
シンプルなコンテンツ無限ループスライダーが必要になった際に是非。。。
【2012/10/13】 ページ内での複数設置およびスライド移動の方向選択を可能としたループスライダー改訂版スクリプトを作成しました。詳細はこちらから