逆スクロール・停止とコントローラーを含むプログラム例


黄色文字部分が追加・変更部分
緑色文字部分がコントローラー
 ( コントローラー部分を書かなければ、従来通りの動作をします )

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

/* サイズ設定 */
function p_mov(){
p1 = -(pic1.width + h) ;
p2 = pic2.width - h ;
p3 = -(pic1.width + pic2.width + h) ;
p_mov1();
}

/* 画像移動 */
function p_mov1(){
pic1.style.posLeft -= w ; pic2.style.posLeft -= w ;
if ( pic1.style.posLeft < p1) { pic1.style.posLeft = pic2.style.posLeft + ( pic1.width + pic2.width)} ;
if ( pic2.style.posLeft < p3) { pic2.style.posLeft = pic1.style.posLeft} ;
timerID = setTimeout( "p_mov1()", t ) ;
}

/* 画像逆移動 */
function p_mov2(){
pic1.style.posLeft += w ; pic2.style.posLeft += w ;
if ( pic1.style.posLeft > p2) { pic1.style.posLeft = pic2.style.posLeft} ;
if ( pic2.style.posLeft > -h) { pic2.style.posLeft = pic1.style.posLeft -( pic1.width + pic2.width)} ;
timerID = setTimeout( "p_mov2()", t ) ;
}

/* 移動選択*/
function p_sel(sel){
clearTimeout(timerID) ;
switch (sel){
case 'F' : p_mov1() ; break ;
case 'S' : break ;
case 'R' : p_mov2() ; break ; }
}

// -->
</SCRIPT>
</HEAD>
<BODY onload="p_mov()">
<TABLE>
<TBODY>
<TR>
<TD nowrap>
<IMG id="pic1" style="position : relative" src="img.jpg"><IMG id="pic2" style="position : relative" src="img.jpg">
</TD>
</TR>
</TBODY>
</TABLE>
<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>