回転木馬。
えすけーーーぷ!
シンプルなカルーセルを実装するタイミングがあったので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>
こんな感じ。
元になったリスト部分をランダムで並び替えを行うタイプ。