ご参考まで
画像の数は自由（2以上）対象の数も自由で個別に制御可
文字数制限のため説明は略（コメント文参照）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
div.test {width:200px;float:left;text-align:center;}
div.test img {width:150px;height:150px;}
div.test input {width:5em;}
</style>
</head>
<body>
<div class="test">
<img id="img1" src="A.jpg" alt=""><br>
<input type="button" id="start1" value="start"><br>
<input type="button" id="stop1" value="stop">
</div>
<div class="test">
<img id="img2" src="A.jpg" alt=""><br>
<input type="button" id="start2" value="start"><br>
<input type="button" id="stop2" value="stop">
</div>
<script type="text/javascript">
<!--
(function(){
var chg=function(u,t,spd){
this.count="";
this.url=u;
this.target=t;
this.speed=spd;
this.tid=null;
}
var chg_move=function(){
var c=this.count;
while(c==this.count)c=Math.floor(Math.random()*this.url.length);
this.count=c;
this.target.src=this.url[c];
}
var chg_start=function(){
if(!this.tid)this.tid=setInterval(set(this,"move"),this.speed*1000);
}
var chg_stop=function(){
if(this.tid)clearInterval(this.tid);
this.tid=null;
}
var creater=function(id,start,stop,speed,str,option){
var u=str.split(","),t=document.getElementById(id);
var s=document.getElementById(start),e=document.getElementById(stop);
if(u.length<2||!t||!s||!e||!speed)return;
var obj=new chg(u,t,speed);
try{
s.addEventListener("click",set(obj,"start"),false);
e.addEventListener("click",set(obj,"stop"),false);
}catch(err){
s.attachEvent("onclick",set(obj,"start"));
e.attachEvent("onclick",set(obj,"stop"));
}
if(option)chg_start.call(obj);
}
function set(obj,func){
var f={start:chg_start,stop:chg_stop,move:chg_move}[func];
return function(){f.call(obj);};
}
IChanger=creater;
})();
//IChanger(target id,starter id,stopper id,change speed(sec),csv of src,start option)
IChanger("img1","start1","stop1",1,"A.jpg,B.jpg,C.jpg",1)
IChanger("img2","start2","stop2",1.5,"A.jpg,D.jpg,E.jpg,F.jpg")
//-->
</script>
</body>
</html>
