<! 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>js Picture switch:: </title& Gt <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> < Div id= "div_img_3" class= "div_img" ></div> <div id= "Div_img_4" class= "div_img" ></div> </div > <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]) {//The picture to be moved on the right//the picture to be moved (including all pictures on the left side of the picture) for (var i=0; i<=n; i++) {//Current value-(Picture width-(current value-initial value))/speed Degree 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 picture's position status} else {//pictures to move on left//pictures 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 this L = 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);}, speed1); 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>js Picture switch:: </title& Gt <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 = ["Yun_qi_img/01.jpg", "yun_qi_img/02.jpg", "yun_qi_img/03.jpg", "http://www.lmwq.com.cn/imglist/04.jpg "," Http://www.lmwq.com.cn/imglist/05.jpg, "http://www.lmwq.com.cn/imglist/06.jpg", "http://www.lmwq.com.cn/ Imglist/07.jpg "," http://www.lmwq.com.cn/imglist/08.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) -10) + ' 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]
