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程序设计有所帮助。