あけましておめでとうございます。年の瀬の頃より毎日寒いですが、皆様いかがお過ごしでしょうか。
私の今回のブログ初めですが、jQueryのことについて書きたいと思います。
以前「連続した処理で画像をスライドさせる」ことで記事にしましたが、今回はこちらの応用編です。前回は画像を背景に設定し動かしていたのでリンクが貼れませんでしたが、今回はリンクつきの処理を作りたいと思います。TOPページで商品をずらっと並べたい場合などにご使用ください。
デモ
デモのファイルはこちらからダウンロードできます。
今回は、クローンするひとつの塊を分かりやすくするため、横にグラデーションをかけています。
Step1：まず下準備
こちらはいつもと同じですね。まず必要なファイルを読み込みます。headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は slide.js とします）を読み込みます。
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/slide.js" type="text/javascript"></script>
</head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/slide.js" type="text/javascript"></script>
</head>
Step2:次にHTMLの準備
今回はdivを3つ入れ子にします。その中にliで要素を並べ、floatをかけました。liは必要な数だけ並べてください。
<div id=”demo“>
<div id=”slideArea“>
<div class=”clone_parts“>
<ul>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
<li><a href=”#”><img src=”/common/images/img04.gif” /></a></li>
</ul>
</div>
<div class=”clear”></div>
</div>
</div>必要なCSSは下記。720pxの箇所は、liの横幅と数に合わせて任意で設定してください。
#demo{
#slideArea{
.clone_parts{
display:block;
width:100%;
overflow:hidden;
}#slideArea{
position:relative;
}.clone_parts{
display:inline-block;
float:left;
width:720px;
}Step4:jsを書き込む
最後に、headerで読み込んでいるはずの slide.js の中身を書き込んでいきましょう。今回はちょっと長いです。
$(function(){
/* ▼初見で表示される部分ここから */
var slide = $(‘#demo‘).width();
var parts = $(‘.clone_parts‘).width();
var i = parseInt(slide / parts);
i++;
$(‘#slideArea‘).width(parts*i+parts);
var count;
for(count = 0; count < i;){
$(‘.clone_parts:last’).clone().insertAfter(‘div.clone_parts:last’);
count++;
};
/* ▼アニメーションの処理ここから */
setInterval(function(){
$(‘#slideArea‘).animate({left:’-=’ + ‘1‘ + ‘px’},10);
},40);
setInterval(function(){
$(‘.clone_parts:last’).clone().insertAfter(‘div.clone_parts:last’);
var slideArea = $(‘#slideArea‘).width();
$(‘#slideArea‘).width(slideArea+parts);
},10000);
});解説
.clone()を使用すると、要素を複製することができます。.insertAfter()とセットで使用します。解説を入れるとこうです。
$(function(){
/* ▼初見で表示される部分ここから */
//変数を宣言, slideに#demoの横幅を格納, partsに.clone_partsの横幅を格納
var slide = $(‘#demo‘).width();
var parts = $(‘.clone_parts‘).width();
//変数を宣言, slide÷partsを整数に変換して結果の数値に+1, iに格納する
var i = parseInt(slide / parts);
i++;
//#slideAreaのwidthをparts×i+partsとる
$(‘#slideArea‘).width(parts*i+parts);
//.clone_partsを複製して後ろに挿入 , i+1回処理を繰り返す
var count;
for(count = 0; count < i;){
$(‘.clone_parts:last’).clone().insertAfter(‘div.clone_parts:last’);
count++;
};
/* ▼アニメーションの処理ここから */
//#slideAreaを40ミリ秒ごとに10ミリ秒かけて左に1px動かす
setInterval(function(){
$(‘#slideArea‘).animate({left:’-=’ + ‘1‘ + ‘px’},10);
},40);
//10000ミリ秒に一回.clone_partsを複製して後ろに挿入,#slideAreaのwidthを広げる
setInterval(function(){
$(‘.clone_parts:last’).clone().insertAfter(‘div.clone_parts:last’);
var slideArea = $(‘#slideArea‘).width();
$(‘#slideArea‘).width(slideArea+parts);
},10000);
});
