Tip: You can modify some of the code before running
<! 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 "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> auto Play 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:492px;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 #box. count{position:absolute;right:0;bottom:5px. 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 ("bo X "); 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; Generates a numeric 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 state cutover (); button click 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); Mouse move into the display area stop autoplay obox.onmouseover = function () {clearinterval (Playtimer)}; The mouse leaves the display area to start autoplay obox.onmouseout = function () {Playtimer = SetInterval (Next, 3000)}; function Startmove (itarget) {clearinterval (timer); Timer = setinterval (function () {Domove (itarget)}, function Domove (itarget) {var ispeed = (itarge T-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> </ptml></td> </tr> </tabl E>
Tip: You can modify some of the code before running
