Tip: you can modify some code before running
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>New Document</title><style type="text/css">* {Margin: 0; padding: 0;} ul {list-style: none outside none }. box {width: 200px; border: 1px solid orange; margin: 55px auto }. box1 {height: 25px; background: orange }. box2 {width: 200px; height: 60px; overflow: hidden; position: relative }. box2 li {float: left; width: 200px; height: 60px; background: red ;}. box2. list {height: 60px; position: absolute; top: 0; left: 0; width: 40000%}</style> </head> <body><div class="box"><div class="box1"></div><div class="box2" id="box2"><ul class="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul></div></div> <script type="text/javascript">Window. onload = function () {var box2 = document. getElementById ('box2 '); var oUl = box2.getElementsByTagName ('Ul') [0]; var aLi = oUl. getElementsByTagName ('Lil'); var len = aLi. length; var w = aLi [0]. offsetWidth; var index = 0; var B = true; var timer = null; function next () {B? Index ++: index --; (index = 0 | index = len-1) & (B =! B); startMove (-index * w);} setInterval (next, 2000); function doMove (iTarget) {var iSpeed = (iTarget-oUl.offsetLeft)/14; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); oUl. offsetLeft = iTarget? ClearInterval (timer): oUl. style. left = oUl. offsetLeft + iSpeed + "px" ;}; function startMove (iTarget) {// alert (1); clearInterval (timer); timer = setInterval (function () {doMove (iTarget) ;}, 30 )};};</script> </body></html>
Tip: you can modify some code before running
