以前に「jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法」と題して、コンテンツ要素が無限ループするコンテンツオートスライダーの紹介をしましたが、機能部分でのリクエストなど要望もあって、改良版を作ってみたので紹介してみます。
以前のような自動でコンテンツ要素をループスライドする動作に加えて、スライド部分にマウスオーバーすることで動作をストップする機能と、左右にボタン要素をつけ、スライド動作の向きを変化させる動きを追加したバージョンになります。
まずは動作サンプルから。
jQueryでの画像などのコンテンツ要素ループスライダーの改良版
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-->
HTMLの構成は前回の記事と同じになっており、大枠を任意のIDで覆い（サンプルでは「#loopslider」とします）、そのブロック要素に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
スライドさせるコンテンツ要素を増やしたり減らしたりする時には、HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆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;
}
#loopslider #loopleft {
top: 0;
left: 0;
width: 20px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
font-weight: bold;
background: #555;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 99;
}
#loopslider #loopright {
top: 0;
right: 0;
width: 20px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
font-weight: bold;
background: #555;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 99;
}
/* =======================================
ClearFixElements
======================================= */
#loopslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#loopslider ul {
display: inline-block;
overflow: hidden;
}
CSSも前回の記事とほぼ同じ構成になっていますが、スライダーの左右に配置するボタンを形成するIDの指定が追加になっています。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var moveInterval = 1;
var slideTime = 10;
$('#loopslider').each(function(){
var loopsliderWidth = $(this).width();
var loopsliderHeight = $(this).height();
$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');
$('#loopslider').append('<div id="loopleft">≪</div><div id="loopright">≫</div>');
$('#loopleft,#loopright').css({opacity:'0.5'});
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)
});
$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
timerLeft();
function timerLeft(){
setTimer = setInterval(function(){loopPositionLeft()},0);
};
function loopPositionLeft(){
clearInterval(setTimer);
$('#loopslider_wrap').stop().animate({left:'-=' + (moveInterval) + 'px'},slideTime,'linear',function(){
var posLeft = parseInt($('#loopslider_wrap').css('left'));
var widthCal = (loopWidth)-((loopWidth)*2);
if (posLeft === widthCal) {
$('#loopslider_wrap').css({left:'0'});
}
timerLeft();
$(this).hover(function(){
$('#loopslider_wrap').stop();
clearInterval(setTimer);
},function(){
loopPositionLeft();
});
});
};
$('#loopleft').hover(function(){
$('#loopslider_wrap').stop();
clearInterval(setTimer);
timerLeft();
});
function timerRight(){
setTimer = setInterval(function(){loopPositionRight()},0);
};
function loopPositionRight(){
clearInterval(setTimer);
$('#loopslider_wrap').stop().animate({left:'+=' + (moveInterval) + 'px'},slideTime,'linear',function(){
var posLeft = parseInt($('#loopslider_wrap').css('left'));
var widthCal = (loopWidth)-((loopWidth)*2);
if (posLeft === 0) {
$('#loopslider_wrap').css({left:(-(loopWidth))});
}
timerRight();
$(this).hover(function(){
$('#loopslider_wrap').stop();
clearInterval(setTimer);
},function(){
loopPositionRight();
});
});
};
$('#loopright').hover(function(){
$('#loopslider_wrap').stop();
clearInterval(setTimer);
timerRight();
});
});
});
</script>
スクリプトの始めにある「$(‘#loopslider’).each(function()」がスクリプトを実行させるID名になるので、HTML側で全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
全体の構成はあまり変更していませんが、スクロールする距離や値の取得の方法を変えた影響でスクロールスピードの変更が難しくなってしまいました。
全体の構成もちょっと荒いところがあるので、また時間があるときにいろいろカスタマイズが可能になるものに挑戦したいと思います。。
ご参考までに。。。