回転木馬。

えすけーーーぷ!

シンプルなカルーセルを実装するタイミングがあったので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>

こんな感じ。
元になったリスト部分をランダムで並び替えを行うタイプ。