<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <style type="text/css"> .wrap{ 320px; height:50px; overflow: hidden; margin:0 auto; margin-top:50px; position: relative; } .wrap ul{ position: absolute; overflow: hidden; padding:0px; margin:0; } .wrap ul li{ 100px; height:50px; float: left; line-height: 50px; text-align:center; background:orange; font-size: 16px; margin-right: 10px; color:#fff; list-style-type: none; } </style> <body> <input type="button" value ="我要切" id="tab"> <div class="wrap" id="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> <script type="text/javascript" src="startMove.js"></script> <script type="text/javascript"> window.onload = function(){ var iNum = 3; var oBtn = document.getElementById('tab'); var wrap = document.getElementById('wrap'); var oUl = wrap.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var oSize = parseInt(getStyle(aLi[0],'marginRight')) + parseInt(getStyle(aLi[0],'width')); function getWidth(){ oUl.style.width = aLi.length * oSize +'px'; } getWidth(); //移动函数 alert(startMove) function slider(){ for (i = 0; i< iNum ;i++){ var oLi = aLi[i].cloneNode(true); oUl.appendChild(oLi); getWidth(); } startMove(oUl,{left : -iNum * oSize},function(){ for( i = 0; i< iNum ; i++){ oUl.removeChild(oLi[0]); oUl.tyle.left = 0 +'px'; } }); }; //触发 oBtn.onclick = function(){ slider(); }; }; </script>