javascript+html5实现仿flash滚动播放图片的方法

 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: 2px solid black; } .big_pic{ width: 600px; height: 400px; position: relative; background: snow; overflow: hidden; } .big_pic li{ width: 600px; height: 400px; overflow:hidden; position: absolute; background: black; z-index: 0 } .big_pic li img{ 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-repeat 0 -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: 3px solid paleturquoise;overflow: hidden; } .small_pic ul{ width: 594px; height: 144px; position: absolute; left: 0px;top: 0px; } .small_pic li img{ width: 194px; height: 140px; } .small_pic ul li{ border:2px solid paleturquoise; width: 194px; height: 140px; float: left; cursor: pointer; filter: alpha(opacity:60); opacity: 0.6; }

 window.onload=function(){ var oPlay=document.getElementById('playImages'); var uBig=getClass(oPlay,'big_pic')[0]; var uSmall=getClass(oPlay,'small_pic')[0]; var oPrev=getClass(oPlay,'prev')[0]; var oNext=getClass(oPlay,'next')[0]; var aLeft=getClass(oPlay,'mark_left')[0]; var aRight=getClass(oPlay,'mark_right')[0]; var oUlSmall=uSmall.getElementsByTagName('ul')[0]; var oSli=uSmall.getElementsByTagName('li'); var oBli=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'); }; var index=0; var newZIndex=2; for (var i=0;i0?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); }; function getClass(oParent,name){ var oArray=[]; var oBj=oParent.getElementsByTagName('*'); for(var i=0;i