图片自动播放也可通过按钮控制显示

swissarmy.js

复制代码 代码如下:

////NO need to edit ///////////// //more javascript from http://www.smallrain.net function preloadctrl(im){ if (typeof im=='string'){ var imo=new Image(); imo.src=im; } } if(document.images&&typeof preload_ctrl_images!='undefined'&&preload_ctrl_images){ var ctrlimgs=[previmg, stopimg, playimg, nextimg] for (var i_tem = 0; i_tem < ctrlimgs.length; i_tem++) if (ctrlimgs[i_tem]) preloadctrl(ctrlimgs[i_tem]) } var iss=[]; //array to cache inter_slide instances function inter_slide(){ if(!document.images||arguments.length==0) return; var imgs=arguments[0]; var width=null, height=null, delay=null; if(arguments.length==2) delay=arguments[1]; else if(arguments.length==3||arguments.length==4) width=arguments[1], height=arguments[2], delay=arguments[3]? arguments[3] : null; this.dom=(document.getElementById) //modern dom browsers this.da=document.all this.delay=imgs.delay? imgs.delay : delay? delay : 3000+iss.length*750; this.nextimgidx=0; iss[this.issid=iss.length]=this; this.imgs=imgs; if (imgs.random) this.imgs.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :) this.imgborder=imgs.border? parseInt(imgs.border) : 0; if (!this.dom){ this.postimgs=new Array() //preload imgs for (p=0;p<imgs.length;p++){ this.postimgs[p]=new Image() this.postimgs[p].src=this.imgs[p][0] } } if (this.dom){ //if modern browsers (ie: Firefox, IE5+) this.faded=0; this.loadimgidx=[]; this.fade=!imgs.nofade; if(this.fade) this.degree=10 //initial opacity degree (10%) this.pausecheck=imgs.pause; this.mouseovercheck=0 this.canvasbase="canvas"+this.issid this.curcanvas=this.canvasbase+"_0" this.descriptions=!imgs.no_descriptions; this.man_start=imgs.manual_start; this.addbr=!imgs.no_added_linebreaks; this.no_auto=imgs.no_auto; this.onclick=imgs.onclick; this.specs=imgs.specs; this.counter=imgs.counter; this.ics=imgs.image_controls; this.jumpto=imgs.jumpto; this.no_c=imgs.no_controls; this.target=imgs.target; this.ualt=imgs.use_alt; this.utit=imgs.use_title; this.fadecolor=imgs.fadecolor; this.ibut_hc=imgs.button_highlight; this.dp=imgs.desc_prefix? imgs.desc_prefix : ' '; this.imbcolor=imgs.border_color; this.imbstyle=imgs.border_style; this.width=imgs.width? imgs.width : width? width : null this.width=this.width? this.width+this.imgborder*2 : null; this.height=imgs.height? imgs.height : height? height : null this.height=this.height? this.height+this.imgborder*2 : null; var ief='', dims=''; if(this.width||this.height) dims=this.width&&this.height? 'width:'+this.width+'px;height:'+this.height+'px;' : this.width? 'width:'+this.width+'px;' : 'height:'+this.height+'px;'; if(this.fade&&document.body&&document.body.style) ief=document.body.filters? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);' : typeof document.body.style.opacity=='string'? 'opacity:0;' : 'opacity:0.10;-moz-opacity:0.10;-khtml-opacity:0.10;'; var brs=this.addbr? '<br>' : ''; if (imgs.controls_top){ this.controls(); document.write(brs) } document.write('<div align="center"><div id="master'+this.issid+'" style="position:relative;'+dims+'overflow:hidden;margin:0 auto;"><div id="'+this.canvasbase+'_0" style="position:absolute;'+dims+'top:0;left:0;'+ief+'background-color:'+(imgs.fadecolor? imgs.fadecolor : 'white')+'"><\/div><div id="'+this.canvasbase+'_1" style="position:absolute;'+dims+'top:0;left:0;'+ief+'background-color:'+(imgs.fadecolor? imgs.fadecolor : 'white')+'"><\/div><\/div><\/div>') if(this.descriptions) document.write(brs+'<div align="center">'+this.dp+'<span id="imgdsc'+this.issid+'"> <\/span></div>\n'); if(this.counter&&!this.descriptions) document.write(brs); if(this.counter) this.cntrl() if (!imgs.controls_top){ document.write(this.ics? '' : brs); this.controls(); } } else document.write('<div align="center"><img name="defaultslide'+this.issid+'" src="'+this.postimgs[0].src+'"><\/div>') if (this.dom) //if modern browsers such as Firefox, IE5+ this.startit() else{ this.nextimgidx++ setInterval("iss["+this.issid+"].rotateimg()", this.delay) } } inter_slide.prototype.cntrl=function(){ this.cpad=this.imgs.length.toString().length; document.write('<div align="center">Viewing Image: <b><span id="thecnt'+this.issid+'"><\/span><\/b>of<span style="font-size:1ex;"> </span> <b>'+this.imgs.length+'<\/b><\/div>'); } inter_slide.prototype.controls=function(){ var brs=this.addbr? '<br>' : '  '; if(!this.ics&&!this.no_c) document.write('<div align="center"><input id="prev'+this.issid+'" disabled type="button" value=" << " onclick="iss['+this.issid+'].changeimg(false, \'nav\');">\n'+ (this.no_auto? '   ' : ' <input id="gostp'+this.issid+'" type="button" value=" Stop " onclick="iss['+this.issid+'].gostop(this);">\n')+ ' <input id="next'+this.issid+'" disabled type="button" value=" >> " onclick="iss['+this.issid+'].changeimg(true, \'nav\');">'+(this.jumpto? brs+'Jump to: <input disabled type="text" size="'+this.imgs.length.toString().length+'" id="goto'+this.issid+'" onkeydown="iss['+this.issid+'].jumper(event);"><input id="go'+this.issid+'" disabled type="button" onclick="iss['+this.issid+'].jumper();" value="GO">' : '')+'<\/div>') else if(this.ics&&!this.no_c){ var op=document.body.filters? ' style="filter:alpha(opacity=100);"' : ' style="opacity:'+(this.man_start? 0.99 : 0.45)+';"'; document.write('<table align="center" cellpadding="0" cellspacing="10"><tr><td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" type="image" title="Previous" id="prev'+this.issid+'" src="'+previmg+'" onclick="iss['+this.issid+'].changeimg(false, \'nav\');"><\/td>'+(this.no_auto? '<td> <\/td>' : '<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" title="Stop" type="image" id="gostp'+this.issid+'" src="'+(this.g_fPlayMode? playimg : stopimg)+'" onclick="iss['+this.issid+'].gostop(this);"><\/td>')+'<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' onmouseover="iss['+this.issid+'].ibute(this,1);" onmouseout="iss['+this.issid+'].ibute(this,2);" onmousedown="iss['+this.issid+'].ibute(this,3);" onmouseup="iss['+this.issid+'].ibute(this,4);" type="image" title="Next" id="next'+this.issid+'" src="'+nextimg+'" onclick="iss['+this.issid+'].changeimg(true, \'nav\');"><\/td><\/tr><\/table>\n'); } else this.no_c=1; } inter_slide.prototype.jumper=function(e){ var key; if(typeof e=='object') key=e.keyCode? e.keyCode : e.which? e.which : 1; if(key&&key!==13) return; var num=typeof e=='number'? e : parseInt(this.go('goto'+this.issid).value); if(num<=this.imgs.length&&num>0){ this.nextimgidx=num-2; this.changeimg(true, 'jump'); } } inter_slide.prototype.ibute=function(obj, i){ if(!obj.parentNode) return; if(i==1) obj.parentNode.style.backgroundColor=this.ibut_hc? this.ibut_hc : 'yellow'; else if(i==2) obj.parentNode.style.backgroundColor='transparent'; else if(i==3){ obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='1px solid gray'; obj.parentNode.style.paddingRight='1px';obj.parentNode.style.paddingBottom=0; } if (i==2||i==4){ obj.parentNode.style.borderTop=obj.parentNode.style.borderLeft='none'; obj.parentNode.style.paddingRight='2px';obj.parentNode.style.paddingBottom='1px'; } } inter_slide.prototype.fadepic=function(){ if (this.fade&&this.degree<100){ this.faded=0 this.degree+=10 if (this.tempobj.filters&&this.tempobj.filters[0]){ if (typeof this.tempobj.filters[0].opacity=="number") //if IE6+ this.tempobj.filters[0].opacity=this.degree else //else if IE5.5- this.tempobj.style.filter="alpha(opacity="+this.degree+")" } else if (this.tempobj.style.MozOpacity) this.tempobj.style.MozOpacity=this.degree/101 else if (this.tempobj.style.KhtmlOpacity) this.tempobj.style.KhtmlOpacity=this.degree/100 else if (this.tempobj.style.opacity&&!this.tempobj.filters) this.tempobj.style.opacity=this.degree/101 } else{ this.faded=1 clearInterval(this.fadeclear) this.nextcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_0" : this.canvasbase+"_1" this.tempobj=this.go(this.nextcanvas) if(this.playing) this.changeimg() } } inter_slide.prototype.populateslide=function(picobj, picidx){ if(document.getElementsByTagName){ if(picobj.getElementsByTagName('a')[0]&&picobj.getElementsByTagName('a')[0].onclick) picobj.getElementsByTagName('a')[0].onclick=null; if(picobj.getElementsByTagName('img')[0]&&picobj.getElementsByTagName('img')[0].onload) picobj.getElementsByTagName('img')[0].onload=null; } picobj.style.backgroundColor=this.imgs[picidx].fadecolor? this.imgs[picidx].fadecolor : this.fadecolor? this.fadecolor : 'white'; var slideHTML='<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle" style="background:transparent none;">' if (this.imgs[picidx][2]){ //if associated link exists for img var specs=this.imgs[picidx][4]? ", '"+this.imgs[picidx][4]+"'" : this.specs? ", '"+this.specs+"'" : ''; slideHTML+='<a href="'+this.imgs[picidx][2]+'"'+(this.imgs[picidx][3]? ' target="'+this.imgs[picidx][3]+'"' : this.target? ' target="'+this.target+'"' : '')+' onclick="'+(this.onclick? this.onclick : 'window.open(this.href, (this.target? this.target : \'_self\')'+specs+');return false;')+'">' } slideHTML+='<img id="theimg'+picidx+'_'+this.issid+'" src="'+(this.loadimgidx[picidx]&&typeof this.loadimgidx[picidx].complete=='boolean'&&this.loadimgidx[picidx].complete? this.loadimgidx[picidx].src : this.imgs[picidx][0])+'" alt="'+(this.ualt? this.imgs[picidx][1] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][1] : '')+'" '+(this.imbcolor&&!this.imgs[picidx].noborder? 'style="border:'+this.imgborder+'px '+(this.imbstyle? this.imbstyle : 'solid')+' '+this.imbcolor+';"' : 'border="'+(this.imgs[picidx].noborder? '0' : this.imgborder)+'"')+(!this.width||!this.height? ' onload="iss['+this.issid+'].imgload(this);"' : '')+'>' if (this.imgs[picidx][2]) //if associated link exists for img slideHTML+='<\/a>' slideHTML+='<\/td><\/tr><\/table>' picobj.innerHTML=slideHTML } inter_slide.prototype.buttons=function(bool){ if(this.no_c) return; var next=this.go('next'+this.issid), prev=this.go('prev'+this.issid); next.disabled=prev.disabled=!bool; next.title=bool? 'next' : ''; prev.title=bool? 'previous' : ''; if(this.jumpto&&!this.ics) this.go('go'+this.issid).disabled=this.go('goto'+this.issid).disabled=!bool; if(this.ics){ if(!this.no_auto){ var go=this.go('gostp'+this.issid) go.title=bool? 'Play' : 'Stop'; go.src=bool? playimg : stopimg; } if(prev.filters&&prev.parentNode) prev.parentNode.style.filter=next.parentNode.style.filter='alpha(opacity='+(bool? 100 : 45)+')'; else if(prev.style.opacity&&!prev.filters) prev.style.opacity=next.style.opacity=bool? 0.99 : 0.45; } } inter_slide.prototype.imgload=function(el){ if(!el&&!this.imgel) return; var el=el? el : this.imgel; if(el.width==0||el.height==0){ this.imgel=el; var cacheobj=this; clearTimeout(this.getdim) this.getdim=setTimeout(function(){cacheobj.imgload()}, 300) return; } var m=this.go('master'+this.issid).style, c0=this.go(this.canvasbase+'_0').style, c1=this.go(this.canvasbase+'_1').style; if(!this.width){ this.width=el.width+this.imgborder*2; m.width = c0.width = c1.width = this.width+'px'; } if(!this.height){ this.height=el.height+this.imgborder*2; m.height = c0.height = c1.height = this.height+'px'; } } inter_slide.prototype.changeimg=function(bool,nav){ if(this.playing){ this.buttons(false) this.nextimgidx=(this.keeptrack()<this.imgs.length-1)? this.keeptrack()+1 : 0 this.populateslide(this.tempobj, this.nextimgidx) if(bool) this.rotateimg() else{ clearTimeout(this.inprocess) this.inprocess=setTimeout("iss["+this.issid+"].rotateimg()", this.delay) } } else { if(!this.faded){ if(nav&&nav=='nav') return; this.nextimgidx=this.keeptrack()+(bool? 1 : -1) this.nextimgidx=(this.nextimgidx<this.imgs.length)? this.nextimgidx : this.nextimgidx-this.imgs.length this.nextimgidx=(this.nextimgidx>-1)? this.nextimgidx : this.imgs.length+this.nextimgidx return; } if(this.fadeclear) clearInterval(this.fadeclear); if(bool){ var loadidx=this.nextimgidx+2 loadidx=(loadidx<this.imgs.length)? loadidx : loadidx-this.imgs.length; loadidx=(loadidx>-1)? loadidx : this.imgs.length+loadidx; this.loadimgidx[loadidx]=new Image(); this.loadimgidx[loadidx].src=this.imgs[loadidx][0]; } else{ var loadidx=this.nextimgidx-2 loadidx=(loadidx<this.imgs.length)? loadidx : loadidx-this.imgs.length loadidx=(loadidx>-1)? loadidx : this.imgs.length+loadidx this.loadimgidx[loadidx]=new Image(); this.loadimgidx[loadidx].src=this.imgs[loadidx][0]; } if(nav&&nav=='jump') this.nextimgidx++; else this.nextimgidx=this.keeptrack()+(bool? 1 : -1) this.nextimgidx=(this.nextimgidx<this.imgs.length)? this.nextimgidx : this.nextimgidx-this.imgs.length this.nextimgidx=(this.nextimgidx>-1)? this.nextimgidx : this.imgs.length+this.nextimgidx this.populateslide(this.tempobj, this.nextimgidx) this.rotateimg() } } inter_slide.prototype.go=function(id){ return this.da? this.da[id] : document.getElementById(id); } inter_slide.prototype.rotateimg=function(){ if(this.dom){ var cimg=this.go('theimg'+this.nextimgidx+'_'+this.issid)? this.go('theimg'+this.nextimgidx+'_'+this.issid) : null; if(cimg&&typeof cimg.complete=='boolean'&&!cimg.complete){ var cacheobj=this clearTimeout(this.loading) this.loading=setTimeout(function(){cacheobj.rotateimg()}, 300) return; } if (this.mouseovercheck==1){ var cacheobj=this clearTimeout(this.mousep) this.mousep=setTimeout(function(){cacheobj.rotateimg()}, 100) return; } if(this.fade) this.resetit() var crossobj=this.tempobj=this.go(this.curcanvas) crossobj.style.zIndex++ var othercanvas=this.curcanvas==this.canvasbase+"_0"? this.go(this.canvasbase+"_1") : this.go(this.canvasbase+"_0"); othercanvas.style.zIndex=0; if(this.descriptions) this.go('imgdsc'+this.issid).innerHTML = this.imgs[this.keeptrack()][1]; if(this.counter){ var padit=''; for (var p=0; p<this.cpad-(this.nextimgidx+1).toString().length; p++) padit+='<span style="visibility:hidden;">0</span>'; this.go('thecnt'+this.issid).innerHTML = padit+(this.keeptrack()<this.imgs.length? this.keeptrack()+1 : 1); } if (this.jumpto) this.go('goto'+this.issid).value=this.keeptrack()<this.imgs.length? this.keeptrack()+1 : 1; this.jumperidx=this.keeptrack()<this.imgs.length? this.keeptrack()+1 : 1; var fadeobj=this clearInterval(this.fadeclear) this.fadeclear=setInterval(function(){fadeobj.fadepic()},50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var v4imgobj=document.images['defaultslide'+this.issid] v4imgobj.src=this.postimgs[this.nextimgidx].src this.nextimgidx=(this.nextimgidx<this.imgs.length-1)? this.nextimgidx+1 : 0 } } inter_slide.prototype.resetit=function(){ this.degree=10 var crossobj=this.go(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=this.degree/100 else if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity=this.degree/101 } inter_slide.prototype.startit=function(){ this.playing=1 var crossobj=this.go(this.curcanvas) this.populateslide(crossobj, this.nextimgidx) if (this.pausecheck==1){ //if slideshow should pause onmouseover var cacheobj=this var crossobjcontainer=this.go("master"+this.issid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimg() if(this.no_auto) this.gostop(); else if(this.man_start) this.gostop(this.go('gostp'+this.issid)); else if(this.ics&&document.body.filters){ //kludge for IE5.5 bug this.buttons(false); } } inter_slide.prototype.gostop=function(el){ if(el) el.value=el.value==' Stop '? ' Play ' : ' Stop '; if(this.inprocess&&this.playing){ clearTimeout(this.inprocess); this.nextimgidx-=this.faded; } this.playing=!this.playing; if(this.playing){ clearInterval(this.fadeclear) this.faded=1 this.changeimg(true); } else{ var loadidx=(this.keeptrack()<this.imgs.length-1)? this.keeptrack()+1 : 0 this.loadimgidx[loadidx]=new Image(); this.loadimgidx[loadidx].src=this.imgs[loadidx][0]; this.jumper(this.jumperidx? this.jumperidx : 0) this.buttons(true); } } inter_slide.prototype.keeptrack=function(){ if(!document.getElementsByTagName) return this.nextimgidx; var canvases=[this.go('canvas'+this.issid+'_0'), this.go('canvas'+this.issid+'_1')] if(canvases[0].style.zIndex>canvases[1].style.zIndex&&canvases[0].getElementsByTagName("img")[0]) return parseInt(canvases[0].getElementsByTagName('img')[0].id.replace(/theimg/, '')) else if(canvases[1].getElementsByTagName("img")[0]) return parseInt(canvases[1].getElementsByTagName('img')[0].id.replace(/theimg/, '')) else return this.nextimgidx; }

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]