javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下:
html部分:
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <scriptsrc="move.js"type="text/javascript"></script> <linkhref="css.css"type="text/css"rel="stylesheet"> </head> <body> <divid="playImages"class="play"> <ulclass="big_pic"> <divclass="prev"></div> <divclass="next"></div> <aclass="mark_left"href="javascript:;"></a> <aclass="mark_right"href="javascript:;"></a> <listyle="z-index:1"><imgsrc="image/1.JPG"></li> <li><imgsrc="image/2.JPG"></li> <li><imgsrc="image/3.JPG"></li> <li><imgsrc="image/4.JPG"></li> <li><imgsrc="image/5.JPG"></li> <li><imgsrc="image/6.JPG"></li> </ul> <divclass="small_pic"> <ul> <li><imgsrc="image/1.JPG"></li> <li><imgsrc="image/2.JPG"></li> <li><imgsrc="image/3.JPG"></li> <li><imgsrc="image/4.JPG"></li> <li><imgsrc="image/5.JPG"></li> <li><imgsrc="image/6.JPG"></li> </ul> </div> </div> </body> </html>
css部分:
body{margin:0px;padding:0px;} ul{margin:0px;padding:0px;} li{list-style:none;} .play{width:600px;height:550px;left:30px;top:20px; position:relative;border:2pxsolidblack; } .big_pic{width:600px;height:400px;position:relative; background:snow;overflow:hidden; } .big_picli{width:600px;height:400px;overflow:hidden; position:absolute;background:black;z-index:0 } .big_picliimg{width:600px;height:400px; position:absolute; } .mark_left{width:300px;height:400px; background:orange;position:absolute;left:0px;top:0px; z-index:3000;filter:alpha(opacity:0);opacity:0; } .mark_right{width:300px;height:400px;background:cornflowerblue; position:absolute;left:300px;top:0px; z-index:3000;filter:alpha(opacity:0);opacity:0; } .prev{width:60px;height:60px; background:url(image/btn.gif)no-repeat;position:absolute; z-index:3001;top:170px;left:10px;cursor:pointer; filter:alpha(opacity:0);opacity:0; } .next{width:60px;height:60px; background:url(image/btn.gif)no-repeat0-60px; position:absolute;z-index:3001;top:170px;right:10px; cursor:pointer;filter:alpha(opacity:0);opacity:0; } .small_pic{width:594px;height:144px; position:relative;top:0;left:0; border:3pxsolidpaleturquoise;overflow:hidden; } .small_picul{width:594px;height:144px; position:absolute;left:0px;top:0px; } .small_picliimg{width:194px;height:140px;} .small_piculli{border:2pxsolidpaleturquoise; width:194px;height:140px;float:left; cursor:pointer;filter:alpha(opacity:60);opacity:0.6; }
JS部分:
window.onload=function(){ varoPlay=document.getElementById('playImages'); varuBig=getClass(oPlay,'big_pic')[0]; varuSmall=getClass(oPlay,'small_pic')[0]; varoPrev=getClass(oPlay,'prev')[0]; varoNext=getClass(oPlay,'next')[0]; varaLeft=getClass(oPlay,'mark_left')[0]; varaRight=getClass(oPlay,'mark_right')[0]; varoUlSmall=uSmall.getElementsByTagName('ul')[0]; varoSli=uSmall.getElementsByTagName('li'); varoBli=uBig.getElementsByTagName('li'); oUlSmall.style.width=oSli[0].offsetWidth*oSli.length+'px'; oPrev.onmouseover=aLeft.onmouseover=function(){ move(oPrev,100,'opacity'); }; oPrev.onmouseout=aLeft.onmouseout=function(){ move(oPrev,0,'opacity'); }; oNext.onmouseover=aRight.onmouseover=function(){ move(oNext,100,'opacity'); }; oNext.onmouseout=aRight.onmouseout=function(){ move(oNext,0,'opacity'); }; varindex=0; varnewZIndex=2; for(vari=0;i<oSli.length;i++){ oSli[i].num=i; oSli[i].onclick=function(){ if(this.num==index){ return; }else{ index=this.num; tab(); } }; oSli[i].onmouseover=function(){ move(this,100,'opacity'); }; oSli[i].onmouseout=function(){ if(this.num!=index){ move(this,60,'opacity'); } }; } oPrev.onclick=function(){ index--; if(index==-1){ index=oSli.length-1; } tab(); }; oNext.onclick=function(){ index++; if(index==oBli.length){ index=0; } tab(); }; functiontab(){ oBli[index].style.height=0; oBli[index].style.zIndex=newZIndex++; move(oBli[index],400,'height'); for(vari=0;i<oSli.length;i++){ move(oSli[i],60,'opacity'); } move(oSli[index],100,'opacity'); if(index==0){ move(oUlSmall,0,'left'); }elseif(index==oSli.length-1){ move(oUlSmall,-(index-2)*oSli[0].offsetWidth,'left'); }else{ move(oUlSmall,-(index-1)*oSli[0].offsetWidth,'left'); } }; vartimer=setInterval(oNext.onclick,3000);; oPlay.onmouseover=function(){ clearInterval(timer); }; oPlay.onmouseout=function(){ timer=setInterval(oNext.onclick,3000); }; }; functiongetStyle(obj,name){ if(obj.currentStyle){ returnobj.currentStyle[name]; }else{ returngetComputedStyle(obj,false)[name]; } }; functionmove(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varcur=0; if(name=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,name))*100); }else{ cur=parseInt(getStyle(obj,name)); } varspeed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ if(name=='opacity'){ obj.style.opacity=(cur+speed)/100; obj.style.filter='alpha(opacity:'+cur+speed+')'; }else{ obj.style[name]=cur+speed+"px"; } } },30); }; functiongetClass(oParent,name){ varoArray=[]; varoBj=oParent.getElementsByTagName('*'); for(vari=0;i<oBj.length;i++){ if(oBj[i].className==name){ oArray.push(oBj[i]); } } returnoArray; }
希望本文所述对大家的javascript程序设计有所帮助。