Javascript code for automatic slide playback

A good picture switching effect that can be used to discuss automatic playback with cache effect. You may want to know more about it.

The Code is as follows:

Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> automatic playback-slide Buffer Effect </title> <Style> Body, div, ul, li {margin: 0; padding: 0 ;} Ul {list-style-type: none ;} Body {background: #000; text-align: center; font: 12px/20px Arial ;} # Box {position: relative; width: pixel PX; height: 172px; background: # fff; border-radius: 5px; border: 8px solid # fff; margin: 10px auto; cursor: pointer ;} # Box. list {position: relative; width: 490px; height: 170px; overflow: hidden ;} # Box. list ul {position: absolute; top: 0; left: 0 ;} # Box. list li {width: 490px; height: 170px; overflow: hidden ;} # Box. count {position: absolute; right: 0; bottom: 5px ;} # Box. count li {color: # fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: # F90; opacity: 0.7; filter: alpha (opacity = 70); border-radius: 20px ;} # Box. count li. current {color: # fff; opacity: 1; filter: alpha (opacity = 100); font-weight: 700; background: # f60 ;} # Tmp {width: 100px; height: 100px; background: red; position: absolute ;} </Style> <Script type = "text/javascript"> Window. onload = function () { Var oBox = document. getElementById ("box "); Var oList = oBox. getElementsByTagName ("ul") [0]; Var aImg = oBox. getElementsByTagName ("img "); Var timer = playTimer = null; Var index = I = 0; Var bOrder = true; Var aTmp = []; Var aBtn = null;   // Generate a number button For (I = 0; I <aImg. length; I ++) aTmp. push ("<li>" + (I + 1) + "</li> ");   // Insert element Var oCount = document. createElement ("ul "); OCount. className = "count "; OCount. innerHTML = aTmp. join (""); OBox. appendChild (oCount ); ABtn = oBox. getElementsByTagName ("ul") [1]. getElementsByTagName ("li ");   // Initialization status Cutover ();   // Click the button to switch For (I = 0; I <aBtn. length; I ++) { ABtn [I]. index = I; ABtn [I]. onmouseover = function () { Index = this. index; Cutover () } }   Function cutover () { For (I = 0; I <aBtn. length; I ++) aBtn [I]. className = ""; ABtn [index]. className = "current "; StartMove (-(index * aImg [0]. offsetHeight )) }   Function next () { BOrder? Index ++: index --; Index <= 0 & (index = 0, bOrder = true ); Index> = aBtn. length-1 & (index = aBtn. length-1, bOrder = false) Cutover () }   PlayTimer = setInterval (next, 3000 );   // Move the cursor to the display area to stop automatic playback OBox. onmouseover = function () { ClearInterval (playTimer) };   // Move the mouse away from the display area to start automatic playback OBox. onmouseout = function () { PlayTimer = setInterval (next, 3000) }; Function startMove (iTarget) { ClearInterval (timer ); Timer = setInterval (function () { DoMove (iTarget) }, 30) } Function doMove (iTarget) { Var iSpeed = (iTarget-oList. offsetTop)/10; ISpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed ); OList. offsetTop = iTarget? ClearInterval (timer): oList. style. top = oList. offsetTop + iSpeed + "px" } }; </Script> </Head> <Body> <Div id = "box"> <Div class = "list"> <Ul> <Li> </li> <Li> </li> <Li> </li> <Li> </li> <Li> </li> </Ul> </Div> </Div> </Body>