本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法。分享给大家供大家参考。具体如下：

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: 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;

}

JS部分：

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

希望本文所述对大家的javascript程序设计有所帮助。

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理