日期:2014-05-16  浏览次数:20412 次

JS控制的图片切换 如何停止切换
下面是一个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