横スクロールを使った改ページ効果

JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

横スクロールを使った改ページ効果
※ 効果をわかりやすくするためにウィンドウサイズを800 x 600 にリサイズしています。
このサンプルはNetscape4ではスクロール幅に誤差が出ますが、
原因は縦スクロールバーが出ているためで、
実際に使用するときに縦スクロールバーが出ていなければ問題有りません
← 　ここは１ページ目です　→ ← 　ここは２ページ目です　→ ← 　ここは３ページ目です　→ ← 　ここは４ページ目です　→ ← 　ここは５ページ目です　→

■ このスクリプトのソース
<script>
// 最大幅
max_width = 4000;

// 一度のクリックでスクロールさせる幅
slide_wid = 800;

// スクロールピッチ
offset = 40;

// スクロールスピード
speed = 10;

x = i = 0;
function side_scroll(p) {
   if (p) { x += slide_wid; mode = 1; }
   else { x -= slide_wid; mode = 2; }
   if (x >= max_width) { mode = 0; x = 0; }
   else if (x < 0) { mode = 0; x = max_width - slide_wid; }
   if (mode) slide();
   else self.scrollTo(x,0);
}

function slide() {
   if (mode == 1) self.scrollBy(offset,0);
   else if (mode == 2) self.scrollBy(-offset,0);
   if (++i < slide_wid / offset) setTimeout("slide()",speed);
   else i = 0 ;
}
</script>
<table cellpadding=0 cellspacing=0 width=4000>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
　ここは１ページ目です　<a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
　ここは２ページ目です　<a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
　ここは３ページ目です　<a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
　ここは４ページ目です　<a href="javascript:side_scroll(1)">→</a></td>
<td width=800 align=center><a href="javascript:side_scroll(0)">←</a>
　ここは５ページ目です　<a href="javascript:side_scroll(1)">→</a></td>
</table>