JAVASCRIPT+HTML5 to realize the method of imitating flash scrolling and playing picture _javascript skills

The example of this article describes the method of JAVASCRIPT+HTML5 to realize flash scrolling. Share to everyone for your reference. Specifically as follows:

HTML section:

<! DOCTYPE html>  

CSS section:

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 L 
I img{width:600px; height:400px; position:absolute;} . mark_left{width:300px; height:400px; background:orange; position:absolute; left:0px; top:0px; z-index:3000; filte R:alpha (opacity:0);
opacity:0; }. mark_right{width:300px; height:400px; background:cornflowerblue; position:absolute; left:300px; top:0px; z-inde x: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 (OPACITY:60);
opacity:0.6; }

JS section:

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;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 (); 
 }; 
  Function tab () {obli[index].style.height = 0; 
  Obli[index].style.zindex = newzindex++; 
  Move (Obli[index], the ' height '); 
  for (var i = 0; i < osli.length i++) {move (Osli[i], "opacity"); 
  Move (Osli[index], M, ' opacity '); 
  if (index = = 0) {Move (oulsmall, 0, ' left '); 
  else if (index = = osli.length-1) {Move (Oulsmall,-(index-2) * osli[0].offsetwidth, ' left '); 
  else {Move (Oulsmall,-(index-1) * osli[0].offsetwidth, ' left '); 
 } 
 }; var timer=setinterval (onext.onclick,3000);; 
 Oplay.onmouseover=function () {clearinterval (timer); 
 }; 
 Oplay.onmouseout=function () {timer=setinterval (onext.onclick,3000); 
}; 
}; 
 function GetStyle (obj,name) {if (Obj.currentstyle) {return obj.currentstyle[name]; 
 }else{return getComputedStyle (obj,false) [name]; 
} 
}; 
 function Move (obj,itarget,name) {clearinterval (Obj.timer); 
  Obj.timer=setinterval (function () {var cur=0; 
  if (name== ' opacity ') {Cur=math.round (parsefloat (GetStyle (obj,name)) *100); 
  }else{Cur=parseint (GetStyle (obj,name)); 
  } var speed= (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); 
}; 
 function GetClass (oparent,name) {var oarray=[]; 
 var obj=oparent.getelementsbytagname (' * '); for (Var i=0;i<obj.length;i++) {if (obj[i].classname==name) {Oarray.push (obj[i]); 
} return Oarray; }

The

wants this article to help you with your JavaScript programming.