JS控制的图片切换 如何停止切换

Question

下面是一个JS控制的图片切换，也叫幻灯片和焦点图吧，现在想实现鼠标放上去图片停止切换，拿开时再自动切换，请帮写上段这样的代码，谢谢
网页中调用<div id="slideshow"><script type="text/javascript">
var box =new PPTBox();box.width=970; box.height=272;box.autoplayer=5;
box.add({"url":"images/1.jpg","href":"/","title":"悬浮提示标题1"})
box.show();</script></div>
JS代码如下：function PPTBox() {
this.uid=PPTBoxHelper.getId();
PPTBoxHelper.instance[this.uid]=this;
this._$=function(id) {
return document.getElementById(id)
}
;this.width=400;
this.height=300;
this.picWidth=15;
this.picHeight=12;
this.autoplayer=4;
this.target="_blank";
this._box=[];
this._curIndex=0};
PPTBox.prototype= {
_createMainBox:function() {
var flashBoxWidth=this.width*this._box.length+5;
var html="<div id='"+this.uid+"_mainbox' class='mainbox'  style='width:"+(this.width)+"px;
height:"+(this.height+2)+"px;
'>";
html+="<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;
height:"+(this.height+2)+"px;
'></div>";
html+="<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;
height:"+(this.picHeight+2)+"px;
top:-"+(this.picHeight+20)+"px;
'></div>";
html+="</div>";
document.write(html)
}
,_init:function() {
var picstyle="";
var eventstr="PPTBoxHelper.instance['"+this.uid+"']";
var imageHTML="";
var flashbox="";
for(var i=0;
i<this._box.length;
i++) {
var parame=this._box[i];
flashbox+=this.flashHTML(parame.url,this.width,this.height,i);
imageHTML="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='bit01.gif' "+picstyle+" onclick = \""+eventstr+".clickPic("+i+")\"  onmouseover=\""+eventstr+".mouseoverPic("+i+")\"></div>"+imageHTML
}
;this._$(this.uid+"_flashbox").innerHTML=flashbox;
this._$(this.uid+"_imagebox").innerHTML=imageHTML},_play:function() {
clearInterval(this._autoplay);
var idx=this._curIndex+1;
if(idx>=this._box.length) {
idx=0
}
;this.changeIndex(idx);
var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay=setInterval(eventstr,this.autoplayer*1000)},flashHTML:function(url,width,height,idx) {
var isFlash=url.substring(url.lastIndexOf('.')+1).toLowerCase()=="swf";
var html="";
if(isFlash) {
html="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "+"codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+width+"' height='"+height+"'>"+"<param name=\"movie\" value=\""+url+"\" />"+"<param name='quality' value='high' />"+"<param name='wmode' value='transparent'>"+"<embed src='"+url+"' quality='high' wmode='opaque' pluginspage='http://www.macromedia.com/go/getflashplayer'"+"  type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>"+"  </object>"
}
else {
var eventstr="PPTBoxHelper.instance['"+this.uid+"']";
var style="";
if(this._box[idx].href) {
style="cursor:pointer"
}
;html="<img src='"+url+"' style='width:"+width+"px;
height:"+height+"px;
"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>"};
return html},changeIndex:function(idx) {
var parame=this._box[idx];
moveElement(this.uid+"_flashbox",-(idx*this.width),1);
var imgs=this._$(this.uid+"_imagebox").getElementsByTagName("div");
imgs[this._box.length-1-this._curIndex].className="bitdiv defimg";
imgs[this._box.length-1-idx].className="bitdiv curimg";
this._curIndex=idx
}
,mouseoverPic:function(idx) {
this.changeIndex(idx);
if(this.autoplayer>0) {
clearInterval(this._autoplay);
var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay=setInterval(eventstr,this.autoplayer*1000)
}
},clickPic:function(idx) {
var parame=this._box[idx];
if(parame.href&&parame.href!="") {
window.open(parame.href,this.target)
}
},add:function(imgParam) {
this._box[this._box.length]=imgParam
}
,show:function() {
this._createMainBox();
this._init();
if(this.autoplayer>0) {
var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay=setInterval(eventstr,this.autoplayer*1000)
}
}};
var PPTBoxHelper= {
count:0,instance: {
},getId:function() {
return'_ppt_box-'+(this.count++)
}
};
function moveElement(elementID,final_x,interval) {
if(!document.getElementById)return false;
if(!document.getElementById(elementID))return false;
var elem=document.getElementById(elementID);
if(elem.movement) {
clearTimeout(elem.movement)
}
;if(!elem.style.left) {
elem.style.left="0px"
}
;var xpos=parseInt(elem.style.left);
if(xpos==final_x) {
return true
}
;if(xpos<final_x) {
var dist=Math.ceil((final_x-xpos)/5);
xpos=xpos+dist
}
;if(xpos>final_x) {
var dist=Math.ceil((xpos-final_x)/5);
xpos=xpos-dist
}
;elem.style.left=xpos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+interval+")";
elem.movement=setTimeout(repeat,interval)}

Answer 1

function PPTBox() {
this.uid=PPTBoxHelper.getId();
PPTBoxHelper.instance[this.uid]=this;
this._$=function(id) {
return document.getElementById(id)
}
;this.width=400;
this.height=300;
this.picWidth=15;
this.picHeight=12;
this.autoplayer=4;
this.target="_blank";
this._box=[];
this._curIndex=0};
PPTBox.prototype= {
_createMainBox:function() {
var flashBoxWidth=this.width*this._box.length+5;
var html="<div id='"+this.uid+"_mainbox' class='mainbox'  style='width:"+(this.width)+"px;height:"+(this.height+2)+"px;'>";
html+="<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height+2)+"px;'></div>";
html+="<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;height:"+(this.picHeight+2)+"px;top:-"+(this.picHeight+20)+"px;'></div>";
html+="</div>";
document.write(html)
}
,_init:function() {
var picstyle="";
var eventstr="PPTBoxHelper.instance['"+this.uid+"']";
var imageHTML="";
var flashbox="";
for(var i=0;
i<this._box.length;
i++) {
var parame=this._box[i];
flashbox+=this.flashHTML(parame.url,this.width,this.height,i);
imageHTML="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='bit01.gif' "+picstyle+" onclick = \""+eventstr+".clickPic("+i+")\"  onmouseover=\""+eventstr+".mouseoverPic("+i+")\"></div>"+imageHTML
}
;this._$(this.uid+"_flashbox").innerHTML=flashbox;
this._$(this.uid+"_imagebox").innerHTML=imageHTML},_play:function() {
clearInterval(this._autoplay);
var idx=this._curIndex+1;
if(idx>=this._box.length) {
idx=0
}
;this.changeIndex(idx);
var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay=setInterval(eventstr,this.autoplayer*1000)},flashHTML:function(url,width,height,idx) {
var isFlash=url.substring(url.lastIndexOf('.')+1).toLowerCase()=="swf";
var html="";
if(isFlash) {
html="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "+"codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+width+"' height='"+height+"'>"+"<param name=\"movie\" value=\""+url+"\" />"+"<param name='quality' value='high' />"+"<param name='wmode' value='transparent'>"+"<embed src='"+url+"' quality='high' wmode='opaque' pluginspage='http://www.macromedia.com/go/getflashplayer'"+"  type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>"+"  </object>"
}
else {
var eventstr="PPTBoxHelper.instance['"+this.uid+"']";
var style="";
if(this._box[idx].href) {
style="cursor:pointer"
}
;html="<img onmouseover= \""+eventstr+".stop()\" onmouseout=\""+eventstr+".goonplay()\" src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>"};
return html},changeIndex:function(idx) {
var parame=this._box[idx];
moveElement(this.uid+"_flashbox",-(idx*this.width),1);
var imgs=this._$(this.uid+"_imagebox").getElementsByTagName("div");
imgs[this._box.length-1-this._curIndex].className="bitdiv defimg";
imgs[this._box.length-1-idx].className="bitdiv curimg";
this._curIndex=idx
}
,mouseoverPic:function(idx) {
this.changeIndex(idx);
if(this.autoplayer>0) {
clearInterval(this._autoplay);
var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay=setInterval(eventstr,this.autoplayer*1000)
}
},clickPic:function(idx) {
var parame=this._box[idx];
if(parame.href&&parame.href!="") {
window.open(parame.href,this.target)
}
},add:function(imgParam) {
this._box[this._box.length]=imgParam
}
,show:function() {
this._createMainBox();
this._init();
if(this.autoplayer>0) {
var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay=setInterval(eventstr,this.autoplayer*1000)
}
},stop:function(){
    clearInterval(this._autoplay);
},goonplay:function(){
    var eventstr="PPTBoxHelper.instance['"+this.uid+"']._play()";
    this._autoplay=setInterval(eventstr,this.autoplayer*1000)
}};
var PPTBoxHelper= {
count:0,instance: {
},getId:function() {
return'_ppt_box-'+(this.count++)
}
};
function moveElement(elementID,final_x,interval) {
if(!document.getElementById)return false;
if(!document.getElementById(elementID))return false;
var elem=document.getElementById(elementID);
if(elem.movement) {
clearTimeout(elem.movement)
}
;if(!elem.style.left) {
elem.style.left="0px"
}
;var xpos=parseInt(elem.style.left);
if(xpos==final_x) {
return true
}
;if(xpos<final_x) {
var dist=Math.ceil((final_x-xpos)/5);
xpos=xpos+dist
}
;if(xpos>final_x) {
var dist=Math.ceil((xpos-final_x)/5);
xpos=xpos-dist
}
;elem.style.left=xpos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+interval+")";
elem.movement=setTimeout(repeat,interval)} 代码还是很乱，加了2个方法，不知道会不会有其他BUG。。

Answer 2

果然高手非常感谢，可行，试了IE6-10 \FF \360\谷歌均正常。谢谢了。喜欢这段代码是因为调用代码非常少而且是<script type="text/javascript">调用搜索看不到，正合我意。JS代码也不大只有4K多，，但不知这段JS代码还能精简不，只需要自动切换，和鼠标放上停止功能。对JS完全我是完全不懂，琢磨了几天也找不到北。总之帮我实现了，多谢