<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .slide{ width: 800px; height: 200px; border:1px solid red; margin: 100px auto; } ul{ padding:0;margin:0; list-style: none; width: 200%; height: inherit; border:3px solid blue; } .slide li{ width: 200px; float: left; border:1px solid springgreen; box-sizing:border-box; height: inherit; } </style></head><body> <div class="slide"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div></body></html><script> var slide=document.querySelector(".slide ul"); var L=0; //左边 var T=setInterval(function(){ if(L>-200){ L=L-1; }else{ L=0; slide.appendChild(slide.firstElementChild) } slide.style.marginLeft=L+"px"; },10) </script>
时间: 2024-10-05 11:04:22