Tip: you can modify some code before running
<!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><title>Switching effect of two-way buffering and flip Image slides</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">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 the numeric button for (I = 0; I <aImg. length; I ++) aTmp. push ("<li>"+ (I + 1) +"</li>"); // Insert the 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 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 ++) AB Tn [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 oBox playback. onmouseover = function () {clearInterval (playTimer)}; // The Mouse leaves the display area to start automatic oBox playback. onmouseout = function () {playTimer = setInterval (next, 3000)}; function startMove (iTarget) {clearInterval (timer); timer = setInterval (fun Ction () {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><!--把下面代码加到<body>与</body>之间--><div id="box"> <div class="list"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div></div></body></html>
Tip: you can modify some code before running
