<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } #div1 { position: relative; 390px; height: 100px; margin: 100px auto; box-sizing: border-box; overflow: hidden; background-color: #111; } #div1>ul { position: absolute; background-color: #fff; } #div1>ul>li { list-style: none; border: 1px solid rebeccapurple; box-sizing: border-box; float: left; height: 100px; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1') var oUl = oDiv.getElementsByTagName('ul')[0] var list = oUl.getElementsByTagName('li') for (var i = 0; i < list.length; i++) { list[i].style.width = oDiv.offsetWidth / list.length + 'px' } oUl.innerHTML = oUl.innerHTML + oUl.innerHTML oUl.style.width = list[0].offsetWidth * list.length + 'px' setInterval(function () { if(oUl.offsetLeft < -oUl.offsetWidth/2) { oUl.style.left = '0' } if(oUl.offsetLeft > 0) { oUl.style.left =-oUl.offsetWidth/2+ 'px' } oUl.style.left = oUl.offsetLeft+2 + 'px' }, 100) } </script> </head> <body> <div id="div1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>