えすけーーーぷ!
シンプルなカルーセルを実装するタイミングがあったのでjSのメモ
var count = 0;
var carousel_speed = 600; //移動スピード
var carousel_waittime = 8000; //待ち時間
var carousel_width = $("#carousel").width();
var carousel_height = $("#carousel").height();
var carousel_main = $("#carousel ul");
var carousel_cont = $("#carousel ul li").length; //複製前の要素の数
var carousel_list = $("#carousel ul li");
var carousel_list_index = carousel_list.get(); //リスト部分を取得
carousel_list.remove(); //既存のリストを削除
//表示部分をランダムに
carousel_list_index.sort(function() { //取得した要素をランダムにソート
return Math.random() - .5;
});
//ソートしたものを再描画
for(i = 0; i < carousel_cont; i++) {
carousel_list_inner = $(carousel_list_index[i]).html();
$(carousel_main).append('<li>' + carousel_list_inner + '</li>');
}
//最初の要素を要素の最後に複製
var carousel_endcontent= $(carousel_list_index[0]).html();
$(carousel_main).append('<li>' + carousel_endcontent +'</li>');
//メイン部分のCSS
var carousel_maxwidth = carousel_width * (carousel_cont + 1); //メイン部分の横幅(+1は複製分
carousel_main.height(carousel_height);
carousel_main.width(carousel_maxwidth);
function carousel_animate() {
count ++;
carousel_main.animate({
'left' : '-=' +(carousel_width)
}, carousel_speed,
function(){
carousel_position()
}
);
}
function carousel_position() {
if(!(count % carousel_cont)) {
carousel_main.css({'left': 0});
count = 0;
}
}
setInterval(function() {
carousel_animate();
},carousel_waittime);
HTML
<div id="carousel">
<ul>
<li>sssss</li>
<li>sssss</li>
<li>sssss</li>
<li>sssss</li>
</ul>
</div>
こんな感じ。
元になったリスト部分をランダムで並び替えを行うタイプ。