スクロールパノラマのソースを提供します。
ファイルは index.html と scroll_1.html と scrollcont.html title.html の４つあります。
上下３段のフレーム構造です。
全て同じフォルダに入れます。jsファイルはありません。
index.htmlファイルは下記です。
rows=40,550 は写真の縦サイズに若干の余裕を持たせたサイズにしてください。
<![CDATA[
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ターンスライドショー</title>
</head>
<frameset rows=40,480,* border=0>
<frame src="title.html" name="title" scrolling="auto" marginheight="10">
<frame src="scroll_1.html" name="frame1" scrolling="no">
<frame src="scrollcont.html" name="scroll" scrolling="auto">
</frameset>
</html>
]]>
title.htmlファイルは下記です。
<![CDATA[
<html>
<head>
<title>かやぶきの里（美山）</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<center>
<body bgcolor="#112233" link="yellow" vlink="red">
<font color="#ffffff">
かやぶきの里 北村（京都府美山町）
</center>
</body>
</html>
]]>
scroll_1.htmlファイルは下記です。
<![CDATA[
<html>
<head>
<title>パノラマ美山</title>
</head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<body bgcolor="#112233">
<table cellpadding=0 cellspacing=0 border=1>
<tr>
<td><img src="panorama_miyama02.jpg"></td>
</tr>
</table>
</body>
</html>
]]>
scrollcont.htmlファイルは下記です。
en=2340 はスクロールする幅です。写真の横幅−画面の幅（１２８０pixelとして）程度にしてあります。調整してみてください。
<![CDATA[
<html>
<head>
<title>スクロール制御</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript">
rl=1;
en=2340;
x=0;
function mv()
{
x=x+rl;
if(x>en){x=en;rl=rl*-1;}
if(x<-100){x=0;rl=rl*-1;} ]]> if(x<0)であったのをif(x<-100)に変更することで左端に約1秒の休止を入れました<![CDATA[
parent.frame1.scroll(x,0);
document.button.iti.value=(parseInt(x));
tm=setTimeout("mv()",10);
}
function mv_l(){rl= -1;}
function mv_r(){rl= 1;}
function mv_ll(){rl= -5;}
function mv_rr(){rl= 5;}
function mv_0(){rl= 0;}
function mv_l0(){rl= 0;x=x-140;}
function mv_r0(){rl= 0;x=x+140;}
function mv_s(){rl= 1;x=0;}
//-->
</script>
</head>
<body bgcolor="#112233" text="#000000">
<center>
<form name="button">
<input type="button" value=" RR " onClick="mv_ll()">
<input type="button" value=" R " onClick="mv_l()">
<input type="button" value="STOP" onClick="mv_0()">
<input type="button" value=" F " onClick="mv_r()">
<input type="button" value=" FF " onClick="mv_rr()">
<input type="text" name="iti" size="5">
</form>
<script language="javascript">
mv();
</script>
</center>
</body>
</html>
]]>
以上