HTML + CSS + JS 元素循环滚动
<!DOCTYPE html> <html lang="zh"> <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>HTML + JS 元素循环滚动 XMSB</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #oBox { width: 80%; margin: 10px auto; overflow: hidden; border: 1px solid black; } #scUl { position: relative; width: calc(100% * 2); } .scLi { list-style: none; float: left; padding: 20px; margin: 20px; width: calc(50% / 4 - 82px); border: 1px solid black; text-align: center; } .scLi:hover { cursor: pointer; } </style> </head> <body> <div id="oBox"> <ul id="scUl"> <li class="scLi">1</li> <li class="scLi">2</li> <li class="scLi">3</li> <li class="scLi">4</li> <li class="scLi">1</li> <li class="scLi">2</li> <li class="scLi">3</li> <li class="scLi">4</li> </ul> </div> <script type="text/javascript"> window.onload = function() { var scUl = document.getElementById('scUl'); var oBoxWidth = document.getElementById('oBox').offsetWidth; var x = 0; function timerF() { scUl.style.left = x + 'px'; if(x == ~oBoxWidth + 1) { x = 0; } else { x --; } } var timer = setInterval(timerF, 5); var scLi = document.getElementsByClassName('scLi'); for(let i = 0; i < scLi.length; i ++) { scLi[i].onmouseover = function() { clearInterval(timer); } scLi[i].onmouseout = function() { timer = setInterval(timerF, 5); } } } </script> </body> </html>
欢迎转载,转载时请注明来源。