どもです。
残業嫌いの餅。です。
同僚が職場で朝を迎えたそうです(´・ω・｀)
さて、今回はjsについてです。
最近、いわゆる高級ペライチサイトなんかだと、ページの無限ループってよくありますよね。
あと、スライドショーやカルーセルなんかを作るときにも、端まで行ったら最初に戻るよりループし続ける方が美しい。
jsで無限ループを実現する方法は色々あると思いますが、僕なりのやり方を公開してみたいと思います。
昔、RPGツクール2003を触ったときには「マップのループ」という項目が存在しましたが、XPになるとそれが廃止されてしまったという事例があったのを思い出しました。
対策も同じようなもので、端まで来たら端に自動ワープさせれば良いです。
で、ワープの方法ですが、僕的には、
$("ワープさせたい要素").animate({scrollLeft（またはscrollTop）:開始地点}, 1, "swing");
が好きですね。
…いえ、もっと簡単にできるのですが、このコマンドはかなりよく使うので、運用が楽なんです、それだけですｗ
カルーセルの場合は、スライドが動き出す直前に、全く見た目が同じ前の項目にワープさせます。
こうすれば、ひたすら右に進んでいるように見えて、実は同じ所で足踏みさせることが可能です。
そんなわけで、僕的無限カルーセルのソース晒します。
HTMLとCSSはいつものように、サイズとoverflow:hoddenを設定した親要素に、widthを広く（孫要素の合計の最低4倍）設定した子要素を置き、その中にカルーセルの中身を横並べにします。アニメーションで動かすのは、hiddenを指定した親要素です。
$(function(){
var productHow = $('.cal ul li').length; // カルーセルの数
var productno = 1 ; // カルーセルの現在番号
var w = 1026 /*$(window).width()*/ ; // カルーセルの幅
var d = 189 // 画像の幅
var q = productHow * d ; // カルーセルの基準位置（ずれるときは調整）
var element = $('.cal ul li').clone(true) ; // カルーセルを複製
$(".cal ul").append(element); // cal ul の末尾に複製を挿入
var element = $('.cal ul li').clone(true) ; // カルーセルを複製
$(".cal ul").append(element); // cal ul の末尾に複製を挿入
setInterval(function() {
if(productno >= productHow){
productno=1;
}else{
productno++;
}
var p = q + ( ( productno - 2 ) * d ) ;
$(".cal").animate({scrollLeft:p}, 1, "swing", function(){
p = q + ( ( productno - 1 ) * d ) ;
$(".cal").animate({scrollLeft:p}, 1000, "swing");
});
}, 2000);
});