hato500+

このスライドショーは動作に関する関数は１つ。
　後は全てHTML文書に対して環境（動作させる舞台）を作るスクリプトです。
　５ケの div 要素と １ケの table 要素で作ります。
　要素は１ケの親要素と５ケの子要素（入れ子構造）
<html>
<head>
<title>hato500+</title>
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
</head>
<body>
<div style="position:relative;top:40px;left:50px;">

var gazo=new Array()
gazo[0]='<a href="#"><img src="http://www7b.biglobe.ne.jp/~te_st/private/p_holder/1.jpg" border=1></a>'
gazo[1]='<a href="#"><img src="http://www7b.biglobe.ne.jp/~te_st/private/p_holder/2.jpg" border=1></a>'
gazo[2]='<a href="#"><img src="http://www7b.biglobe.ne.jp/~te_st/private/p_holder/3.jpg" border=1></a>'
gazo[3]='<a href="#"><img src="http://www7b.biglobe.ne.jp/~te_st/private/p_holder/4.jpg" border=1></a>'
gazo[4]='<a href="#"><img src="http://www7b.biglobe.ne.jp/~te_st/private/p_holder/5.jpg" border=1></a>';
/*写真を配列として代入します。*/

var sukima=" ";
/*sukimaとは写真と写真の間隔*/
var renketu=5;
/*renketuとは，このスライドショーでは２つの配列を組み合わせ１つ目の配列を表示した後２つ目の配列を表示させます次に又１つ目の配列を表示させ連続させます，配列と配列の間の隙間のこと*/

var flow=hayasa;
/*flowを作ったのは flow=0 で停止 flow=hayasa で動作させるため*/

gazo='<nobr>'+gazo.join(sukima)+'</nobr>';
/*<nobr>タグで括ることにより途中で改行を禁止させる。*/
/*join(区切り文字)で写真間の間隔を付加します。()内を空にした場合はカンマが入ります。*/

document.write('<span id="hato" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+gazo+'</span>');
/*この span は便宜上，配列の横幅を取得するためのもので，画面上の外に配置しておきます。ダミー */

var real_w;
var mado1,mado2;

function setup(){
mado1=document.getElementById("test2");
mado2=document.getElementById("test3");
mado1.innerHTML=mado2.innerHTML=gazo;
real_w=document.getElementById("hato").offsetWidth;
mado2.style.left=real_w+renketu+"px";
timer=setInterval("move()",30);
}
/*
・setup関数は２つの div に配列を記述し，配列の横幅を取得し，後ろに記載の move関数を 0.03秒毎に実行させる。変数 gazo は１度，内容を書き換えていることに注意してください。
１回目の変数 gazo は配列として，要素の集合体　２回目の変数 gazo は各要素間にスキ間を加え，タグ<nobr>で括っています。
・offset
要素名.offsetWidth; で要素の横幅を取得。
要素名.offsetHeight; で要素の高さを取得。
*/

window.onload=setup;
/*ページ読み込み時にsetup関数を実行させる*/

function move(){
if (parseInt(mado1.style.left)>-2585){
mado1.style.left=parseInt(mado1.style.left)-flow+"px";}
else
{mado1.style.left=parseInt(mado2.style.left)+real_w+renketu+"px";}

if (parseInt(mado2.style.left)>(real_w*(-1))){
mado2.style.left=parseInt(mado2.style.left)-flow+"px";}
else
{mado2.style.left=parseInt(mado1.style.left)+real_w+renketu+"px";}	//a
}
/*****************
move関数が動作を指定しています。簡単な仕組みで position の left 位置を変えているだけです。real_w*(-1)は上記の場合，実測 -2585でした。どちらを記述しても同じですがreal_w*(-1)を記述してください。mado1の横位置がreal_w*(-1)より大きい時は left 位置を flow分差し引いた位置にする（左へ移動する），小さい時のmado1の横位置は mado2 の横位置＋real_w+renketuでmado1 は mado2 の後ろに配置される。mado2の positionのとり方もmado1と同じで，後は同じことの繰り返し。
mado1の初期値はleft 0
mado2の初期値はleft -1000 aのスクリプトが実行されます。

parseInt();は関数で ()内に文字列を入れると，整数に変換します。

*******************/

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
document.write('<div style="position:relative;width:'+haba+';height:'+takasa+';overflow:hidden">');
/*この div は，はみ出し部分を表示させないためのもの ２*/

document.write('<div style="position:absolute;width:'+haba+';height:'+takasa+';background-color:'+haikei_iro+'" onmouseover="flow=0" onmouseout="flow=hayasa">');
/*この div はマウス操作で停止・動作させるためのもの ３*/

document.write('<div id="test2" style="position:absolute;left:0px;top:0px;background-color:#ff0000;">しばらくお待ちください.....</div>');
/*背景色は赤 ４*/

document.write('<div id="test3" style="position:absolute;left:-1000px;top:0px;background-color:#0000ff;"></div>');
/*背景色は青 ５*/
/*上，２つの div （４と５）内に配列が記述されています。*/

document.write('</div></div>');
document.write('</td></table>');

/***************
・背景色は画像の下をご覧ください。要素の関係を明示するため便宜上，色をつけてあります。
・２の div は１の div の影響を受けます，３の div は２の div の影響を受けます，４と５の div は３の div の影響を受けます（入れ子構造）。
・４と５の div の position は３の div （背景色　黄色）が基準となり，３の div の左上が座標値（00）です。マイナスのleft値は，３の div （背景色　黄色）の左側へ移動します，これは２の div の影響を受け，はみ出し部分は消えます。
******************/

// -->
</script>
</div>
</body>
</html>

デモ

電光掲示板（応用）