いっかいめ

さて、第一回目です。
今回は、JavaScriptでスクロールメニューっぽいのでも作ってみっか　という感じです。
あんまりCSS使ってｳﾆｮｳﾆｮ動かす処理もめんどくさいので、
その内改良版としてまた出そうと思いますが、
仕様としてはこんな感じでどうだろうか、と思います。

▲▼（それか<- ->）　でメニューを動かす。
基本的にグリグリ動かすとかそう言うのは意識しないで作る。
それなりに管理しやすい。

HTMLのソースはコレです。汚くてすんません。ホントに。

<html>
<head>
<title>すくろーるめぬー</title>
<script type="text/javascript" src="scrlmenu.js">
</script>
</head>
<body onLoad="scrolling()">
<table height="48" id="scrtable" class="scrmenu">
<tr><td width="50">contents</td>
<td width="40">　<a href="javascript:void(0);" class="arrow"
onMousedown="scrolling(1)" title="左にｽｸﾛｰﾙ"><-</a></td>
<td width="112" align="center" id="scroll0">とｐ</td>
<td width="112" align="center" id="scroll1">What’s New?</td>
<td width="112" align="center" id="scroll2">デス様</td>
<td width="112" align="center" id="scroll3">ゾイド絵とか</td>
<td width="40">　<a  href="javascript:void(0);" class="arrow"
onMousedown="scrolling(0)" title="右にｽｸﾛｰﾙ">-></a></td>
</tr>
</table>
</body>
</html>

ほんで、スクリプトのソースはこれです。

function scrolling(mode){
  if(mode == 1){
    data = scrl.pop();
    scrl.unshift(data);
  } else if(mode == 0){
    data = scrl.shift();
    scrl.push(data);
  }
  scroll0.innerHTML = scrl[0];
  scroll1.innerHTML = scrl[1];
  scroll2.innerHTML = scrl[2];
  scroll3.innerHTML = scrl[3];
}

/*　初期設定ですよ */

scrl = new Array();
scrl[0] = 'とｐ';
scrl[1] = 'What’s New?';
scrl[2] = 'デス様';
scrl[3] = 'ゾイド絵とか';
scrl[4] = 'テキトウれびゅー';
scrl[5] = 'プロフィール';
scrl[6] = 'ぼやき';
scrl[7] = 'ダウンロード';
scrl[8] = '掲示板';
scrl[9] = 'チャット';
scrl[10] = 'Q&A';
scrl[11] = 'リンク';
scrl[12] = 'メーる？';
scrl[11] = "ヽ(ﾟ∀ﾟ)ﾉ";

ほんで、HTMLのソースを見れば分かると思いますが、
tableタグやtdタグに「id」というものが振ってあると思います。
この「id」がこれから先結構重要な役割を果たしていたりするので、注意して下さい。

えーっと、ソースを提示したので、早速説明したいと思います。
私もJavaScriptを始めたときに結構困ったりしたのですが、
注意して欲しいのは、リロードせずに文字を変化させるには、document.write()ではできない、という事です。
そこで、リロードせずに文字を変化させるには、innerHTMLというプロパティ（？）を使用します。
innerHTMLは、id属性で指定されたオブジェクトの文字が参照または設定できるプロパティです。
このスクリプトでは、

function scrolling(mode){
  if(mode == 1){
    data = scrl.pop();
    scrl.unshift(data);
  } else if(mode == 0){
    data = scrl.shift();
    scrl.push(data);
  }

  scroll0.innerHTML = scrl[0];
  scroll1.innerHTML = scrl[1];
  scroll2.innerHTML = scrl[2];
  scroll3.innerHTML = scrl[3];

}

青く塗った部分で使用しています。
そんで、順を追って説明しますと、

<body onLoad="scrolling()">
で、テーブルの各セルに最初に表示されるメニューを出力
↓
HTMLのソースから、<-　または ->が押される
↓
押されると、関数scrollingが呼ばれる
↓
ifでモード判定。1なら左へ、0なら右へ行くよう処理する
↓
左であれば、pop関数を使って、一番最後の配列の要素を抜き出し、
unshift関数を使って、配列の先頭に置く。
右であれば、shift関数を使って、一番先頭の配列の要素を抜き出し、
push関数で配列の先頭に置く。
↓
innerHTMLを使って、各出力先に結果を出力

という感じです。死ぬほどわかりにくくてすみません。
JavaScriptがある程度分かる方は、読んだ方が手っ取り早いかもしれません。
結構単純なスクリプトですし・・・。

≫scrollmenu.html
これがサンプルですけど、ひょっとしたらこっち見た方が早かったかもしんないね。
しょっぱなから訳わかんねー説明でしたね。
分かりやすく説明できるようにしないとなぁ・・・(ﾟ∀。)