当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 图片自动播放也可通过按钮控制显示

Javascript
用jQuery解决IE不支持的option disable属性
jQuery 源代码显示控件 (Ajax加载方式).
JS backgroundImage控制
jQuery 性能优化指南 (1)
jQuery 性能优化指南(2)
jQuery 性能优化指南(3)
input+select(multiple) 实现下拉框输入值
javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]
jQuery 图像裁剪插件Jcrop的简单使用
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
jquery(1.3.2) 斑马线效果代码
JQuery Jcrop 实现图片裁剪的插件
jquery img src 获取实现代码
javascript 历史记录 经常用于产品最近历史浏览
jquery tabs的实现代码
jQuery 剧场版 你必须知道的javascript
JavaScript 闭包深入理解(closure)
js 图片缩放(按比例)控制代码
广告切换效果(缓动切换)
javascript 用局部变量来代替全局变量

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 503 ::
收藏到网摘: n/a

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 全选 提示:你可先修改部分代码,再按运行]