dependent on http://www.cnblogs.com/wanqiu/p/4452711.html, the name of the picture from 0-9. Example: 0.jpg. If the name is not, use the array to save it!
<! DOCTYPE html>{margin:0; padding:0; } li{List-Style:none; } #box {width:1000px; height:500px; margin:20px Auto; border:1px solid #ccc; } #box ul{height:172px; } #box li{position:relative; float: Left; width:122px; height:172px; Overflow:hidden; } #box li img{position:absolute; Top:0; Left:0; } </style> <script src= "hl_tool.js" type= "Text/javascript" charset= "Utf-8" ></script> <SCR IPT type= "Text/javascript" >window.onload=function(){ varOBox = document.getElementById (' box '); varALi = obox.getelementsbytagname (' li '); varstime = ' '; for(vari = 0; i < ali.length; i++) {ali[i].innerhtml+=ali[i].innerhtml; } functionFntime () {stime= Hgettime (2). Str; for(vari = 0; i < ali.length; i++) { varindex = 0; if(Stime.charat (i) = = 0) {Index= 9; }Else{Index= parseint (Stime.charat (i))-1; } ali[i].getelementsbytagname (' img ') [0].SRC = '. /img/' + stime.charat (i) + '. JPG '; Ali[i].getelementsbytagname (' img ') [1].SRC = '. /img/' + index + '. JPG '; Ali[i].getelementsbytagname (' img ') [1].style.top = ' -172px '; Ali[i].getelementsbytagname (' img ') [0].style.top = ' 0 '; if(Stime.charat (1) = = 0 && (stime.charat (0) +stime.charat (1))% = = = 0 && (Stime.charat (4) +stime.charat (5 ))% = = = 0 && (Stime.charat (2) +stime.charat (3))% 60 = = = 0) {ali[0].getelementsbytagname (' img ') [1].style.top = ' 0px '; ali[0].getelementsbytagname (' img ') [0].style.top = ' 172px '; Hdomove (ali[0].getelementsbytagname (' img ') [1], ' top ', 10,-172); Hdomove (ali[0].getelementsbytagname (' img ') [0], ' top ', 10, 0); } if(Stime.charat (2) = = 0 && (Stime.charat (2) +stime.charat (3))% = = = 0 && (Stime.charat (4) +stime.charat (5 ))% 60 = = = 0) {ali[1].getelementsbytagname (' img ') [1].style.top = ' 0px '; ali[1].getelementsbytagname (' img ') [0].style.top = ' 172px '; Hdomove (ali[1].getelementsbytagname (' img ') [1], ' top ', 10,-172); Hdomove (ali[1].getelementsbytagname (' img ') [0], ' top ', 10, 0); } if(Stime.charat (3) = = 0 && (Stime.charat (2) +stime.charat (3))% = = = 0 && (Stime.charat (4) +stime.charat (5 ))% 60 = = = 0) {ali[2].getelementsbytagname (' img ') [1].style.top = ' 0px '; ali[2].getelementsbytagname (' img ') [0].style.top = ' 172px '; Hdomove (ali[2].getelementsbytagname (' img ') [1], ' top ', 10,-172); Hdomove (ali[2].getelementsbytagname (' img ') [0], ' top ', 10, 0); } if(Stime.charat (4) = = 0 && (Stime.charat (4) +stime.charat (5))% 60 = = = 0) {ali[3].getelementsbytagname (' img ') [1].style.top = ' 0px '; ali[3].getelementsbytagname (' img ') [0].style.top = ' 172px '; Hdomove (ali[3].getelementsbytagname (' img ') [1], ' top ', 10,-172); Hdomove (ali[3].getelementsbytagname (' img ') [0], ' top ', 10, 0); } if(Stime.charat (5) = = 0 && (Stime.charat (4) +stime.charat (5))% 10 = = = 0) {ali[4].getelementsbytagname (' img ') [1].style.top = ' 0px '; ali[4].getelementsbytagname (' img ') [0].style.top = ' 172px '; Hdomove (ali[4].getelementsbytagname (' img ') [1], ' top ', 10,-172); Hdomove (ali[4].getelementsbytagname (' img ') [0], ' top ', 10, 0); } ali[5].getelementsbytagname (' img ') [1].style.top = ' 0px '; ali[5].getelementsbytagname (' img ') [0].style.top = ' 172px '; Hdomove (ali[5].getelementsbytagname (' img ') [1], ' top ', 10,-172); Hdomove (ali[5].getelementsbytagname (' img ') [0], ' top ', 10, 0); }} fntime (); SetInterval (Fntime,1000 ); } </script> Move up and down the schedule of transitions