js实现向左向右无缝轮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 { width: 750px; height: 60px; margin: 10px auto; position: relative; background: #cccccc; overflow: hidden; } #div1 ul { position: absolute; top: 0; left: 0; } #div1 ul li { float: left; width: 200px; height: 50px; margin-left: 5px; list-style: none; } #Right { width: 50px; height: 50px; background: blue; } #Left { width: 50px; height: 50px; background: brown; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1');//获取div var oUl = document.getElementsByTagName('ul')[0];//获取ul var aLi = document.getElementsByTagName('li');//获取li var speat = 2//设置轮动的变量 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'//ul的宽度 function timer() { //向左轮动的判断 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 + speat + 'px' }; var time = setInterval(timer, 30); //鼠标移入停止计时器 oDiv.onmouseover = function () { clearInterval(time) }; //鼠标移出开始计时器 oDiv.onmouseout = function () { time = setInterval(timer, 30); }; //点击向左轮动 document.getElementById('Left').onclick = function () { speat = -2 } //点击向右轮动 document.getElementById('Right').onclick = function () { speat = 2 } } </script> </head> <body> <div id="Left"></div> <div id="Right"></div> <div id="div1"> <ul> <li style="background: red;"></li> <li style="background: rebeccapurple;"></li> <li style="background: royalblue;"></li> <li style="background: salmon;"></li> </ul> </div> </body> </html>