クリックでくるくるコンテンツが変わるJavaScript
2009年12月1日
久しぶりにJavaScript書いた。最近はもっぱらRubyばかり。
けっこうよく使ったりするので、メモっとく。いつもソースを残しておかないからゼロから作り直すのめんどくさい。
▽完成イメージ（ソースコピペで動作確認してください。）
HTMLはこんな感じ。displayの、noneとblockを切り替えるだけ。
HTML:
-
<div id="col_1" class="colDes">コンテンツ1だよー</div>
-
<div id="col_2" class="colDes" style="display:none;">コンテンツ2だよー</div>
-
<div id="col_3" class="colDes" style="display:none;">コンテンツ3だよー</div>
-
<div id="col_4" class="colDes" style="display:none;">コンテンツ4だよー</div>
-
<div id="col_5" class="colDes" style="display:none;">コンテンツ5だよー</div>
-
<div id="col_6" class="colDes" style="display:none;">コンテンツ6だよー</div>
-
-
<span id="to_back">戻る</span>
-
<span id="to_next">次へ</span>
-
</div>
CSSは、とりあえず動きがわかりやすいようにやっつけ。
CSS:
-
#to_next,#to_back {
-
cursor: pointer;
-
font-size: 200%;
-
}
-
#to_next {
-
margin-left: 20px;
-
}
-
.colDes {
-
background: #eee;
-
width: 400px;
-
height: 300px;
-
}
JSもシンプルだね。
JavaScript:
-
(function(){
-
var col = [];
-
for( var i = 0; i <6; i++ )
-
{
-
col[i] = document.getElementById( 'col_' + (i+1) );
-
}
-
var to_next = document.getElementById('to_next');
-
var to_back = document.getElementById('to_back');
-
-
var elm = function(arg)
-
{
-
for( var i = 0; i <col.length; i++ ){
-
col[i].style.display = 'none';
-
}
-
return col[arg].style.display = 'block';
-
}
-
-
var i = 0;
-
to_next.onclick = function()
-
{
-
if( col.length> 0 ){
-
if( i <col.length - 1 ){
-
i++;
-
elm(i);
-
}
-
}
-
}
-
to_back.onclick = function()
-
{
-
if( col.length> 0 ){
-
if( i == 0 ){
-
i = 0;
-
elm(i);
-
}
-
else{
-
i--;
-
elm(i);
-
}
-
}
-
}
-
})();
応用すればAjaxで本とか作れるね！
