往復スクロールのプログラム例


黄色文字部分がプログラム部分
緑色文字部分がコントローラー( コントローラーが不要ならば、この部分は書かない )
 ボタンの画像は、お好みの物を使って下さい


<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
w = 1 ; // 移動距離
t = 20 ; // 割り込み間隔

/* サイズ設定 */
function pwset(){
sw = 800 ;
if ((screen.width <= 800) && (screen.width <= 1280)) { sw = screen.width };
pw1 = pic1.width ;
pw2 = -(pw1 - sw + 40) ;
p_mov1();
}

/* 画像移動 */
function p_mov1(){
pic1.style.posLeft -= w ;
if (( pic1.style.posLeft < pw2) || ( pic1.style.posLeft > 0)) { p_mov2(); };
else {timerID = setTimeout( "p_mov1()", t );};
}

/* 方向切替 */
function p_mov2(){
w =-w ;
timerID = setTimeout( "p_mov1()", 500 );
}

/* 移動選択*/
function p_sel(sel){
clearTimeout(timerID) ;
switch (sel){
case 'F' : w = Math.abs(w) ; p_mov1() ; break ;
case 'S' : ; break ;
case 'R' : w = -Math.abs(w) ; p_mov1() ; break ; }
}
// -->
</SCRIPT>

</HEAD>
<BODY onload="pwset()" >
<IMG id="pic1" style="position : relative" src="img.jpg"><BR>
<IMG src="c1.gif" onclick="p_sel('F')"> <IMG src="c2.gif" onclick="p_sel('S')"> <IMG src="c3.gif" onclick="p_sel('R')">
</BODY>
</HTML>