The first 2 weeks to see a friend said how to use JS to achieve http://women.sohu.com/this page flash picture switch effect, these two days are free, do a, we comment:
"Load picture slow down, please wait."
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" gb2312 "> <pead> <title>www.jb51.net Cloud-dwelling community JS picture switching::</title> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <meta name=" generator "content=" EditPlus "/> <meta name=" Author "content=" ELore "/> & Lt;meta name= "keywords" content= "/> <meta name=" description "content=" "/> <style type=" Text/css "> * { margin:0; padding:0; } body {margin:0; Color: #88c; Background: #333; img {margin:0; padding:0; border:0;} #js_F {position:relative; top:10px; left:10px; Overflow:hidden; width:395px; height:185px; Background: #33c; }. div_img {position:absolute; top:0; width:295px; height:185px; Cursor:pointer; } #div_img_0 {z-index:5; left:0;} #div_img_1 {z-index:4; left:25px;} #div_img_2 {z-index:3; left:50px;} #div_img_3 {z-index:2; left:75px;} #div_img_4 {z-index:1; left:100px;} </style> </pead> <body> <div id= "Js_f" > <div id= "div_img_0" class= "div_img" ></div > <div id= "div_img_1" class= "div_img" ></div> <div id= "div_img_2" class= "div_img" ></DIV&G T <div id= "Div_img_3" class= "div_img" ></div> <div id= "Div_img_4" class= "div_img" ></div> </d iv> <script type= "Text/javascript" > <!--///*--><! [cdata[/*><!--*/var Div_imgs = document.getElementById ("Js_f"). getElementsByTagName ("div"); var imgleft = [0, 25, 50, 75, 100]; 5 picture's initial left value var imgwidth = 270; Width of the picture var ATF = [True, True, True, true, true]; 5 Picture Position: True to the right, false to left var speed1 = ten, speed2 = watts, MO = 15; Speed Var sTo; function Jsf_move (n) {cleartimeout (sTo); var Thisl; Picture left value if (Atf[n]) {//pictures to be moved on the right//to be moved (including all of the pictures on the left-hand side of the picture)picture) for (var i=0; i<=n; i++) {//Current value-(Picture width-(current value-initial value))/Speed THISL = parseint (GetStyle (Div_imgs [i], "left")); Div_imgs[i].style.left = Thisl-math.ceil ((imgwidth-(IMGLEFT[I]-THISL))/mo) + "px"; if (i<n) atf[i] = false; Change the position status of the picture} else {//The picture to be moved on the left//picture to move (including all pictures to the right of the picture) to the right) for (var i=4; i>=n; i-- {//Current value + (current value-initial value)/Speed THISL = parseint (GetStyle (div_imgs[i), "left")); Div_imgs[i].style.left = Thisl + Math.ceil (Math.Abs (thisl-imgleft[i))/mo) + "px"; if (i>n) atf[i] = true; Change the position status of the picture} THISL = parseint (GetStyle (div_imgs[n), "left"); if ((Atf[n] && thisl> (imgleft[n]-imgwidth)) | | (!atf[n] && thisl=3 && atf[n]) {Atf[n] = false; STo = settimeout (function () {jsf_move (n);}, Speed2); else if (n==0 &&!atf[n]) {Atf[n] = true; STo = SEttimeout (function () {jsf_move (n);}, Speed2); else if (Atf[n]) {Atf[n] = false; STo = settimeout (function () {jsf_move (++n);}, Speed2); else {sTo = settimeout (function () {jsf_move (--n);}, Speed2); The position function Jsf_mmove (n) {cleartimeout (sTo) of the picture is judged; Switch (n) {case 0:atf[0] = false; Jsf_move (0); Break Case 1:case 2:case 3:if (atf[n-1]) {sTo = settimeout (function () {jsf_move (n-1);}, SP EED1); else if (Atf[n]) {atf[n-1] = true; STo = settimeout (function () {jsf_move (n-1);}, speed1); else {sTo = settimeout (function () {jsf_move (n);}, speed1); } break; Case 4:ATF = [False, False, False, true, true]; Jsf_move (3); Break } window.onload = function () {sTo = settimeout ("jsf_move (0)", speed2); } functiOn GetStyle (Elem, name) {if (Elem.style[name]) {return elem.style[name];} else if (Elem.currentstyle) {return elem.currentstyle[name];} else if (Document.defaultview && document.defaultView.getComputedStyle) {name = Name.replace (/[A-z])/g, "-$1"); Name = Name.tolowercase (); var s = document.defaultView.getComputedStyle (Elem, ""); return s && s.getpropertyvalue (name); else {return null;} }/*]]>*///--> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This is a bit of a problem, is the mouse on the moving picture on the slide, the picture will pause, the solution is to add a picture position tag:-1 for the left, 0 for the move, 1 for the right, you can also add a moving direction of the parameters, specifically lazy to write.
Next to a write your own picture switch effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" gb2312 "> <pead> <title> Cloud-dwelling community www.jb51.net JS picture switching::</title> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <meta name=" generator "content=" EditPlus "/> <meta name=" Author "content=" ELore "/> & Lt;meta name= "keywords" content= "/> <meta name=" description "content=" "/> <style type=" Text/css "> * { margin:0; padding:0; } body {margin:0; Color: #88c; Background: #333; img {margin:0; padding:0; border:0;} #js_F {position:relative; top:10px; left:10px; Overflow:hidden; width:270px; height:185px; Background: #33c; } #js_F img{Position:absolute; top:0; left:0; width:270px; height:185px; } </style> </pead> <body> <div id= "Js_f" ></div> <script type= "Text/javascript" > <!--///*--><! [cdata[/*><!--*/var Js_f = document.getElementById ("Js_f"); var imglist = ["/upload/20080130202743347.jpg", "/upload/20080130202744477.jpg", "/upload/20080130202744721.jpg", "/ Upload/20080130202744468.jpg ","/upload/20080130202744674.jpg ",]; var imgtemp = new Array (); for (i=0; i\n '; } js_f.innerhtml = content; IMGs = Js_f.getelementsbytagname (' img '); Imgs[0].style.zindex = 20; Imgs[1].style.zindex = 15; function Imgchange () {if (imgid+1) -180) {Imgs[imgid].style.left = (parseint (imgs[imgid].style.left)- + ' px '; Imgs[nextimgid].style.left = (parseint (imgs[nextimgid].style.left) +5) + ' px '; SetTimeout (' imgshow () ', speed1); else {tf =!TF; Imgs[imgid].style.zindex = 15; Imgs[nextimgid].style.zindex = 20; SetTimeout (' imgshow () ', speed1); } else {if (ParseiNT (imgs[imgid].style.left) <0) {Imgs[imgid].style.left = (parseint (imgs[imgid].style.left) +10) + ' px '; Imgs[nextimgid].style.left = (parseint (imgs[nextimgid].style.left)-5) + ' px '; SetTimeout (' imgshow () ', speed1); else {imgs[imgid].style.zindex = 10; tf =!TF; imgid++; Imgchange (); }} imginit (); Imgchange (); /*]]>*///--> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
