JAVASCRIPT+HTML5 to realize the method of scrolling the picture by imitating Flash

JAVASCRIPT+HTML5 to realize the method of scrolling the picture by imitating Flash

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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

CSS section:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

JS section:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123

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], ' height '); f or (var i = 0; i < osli.length i++) {move (Osli[i], N, ' opacity ');} move (Osli[index], "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.