起风网功能：
鼠标移入暂停滚动；
鼠标移出恢复滚动；
控制向左向右滚动；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> #div1{ width: 400px; height: 100px; background: red; float: left; position: relative; margin: 200px; overflow: hidden; } ul{ float: left; list-style: none; margin: 0; padding: 0; position: absolute; } li{ float: left; display: inline; list-style: none; } img{ margin: 0; width: 100px; height: 100px; } </style> <script> window.onload = function(){ var oUl1 = document.getElementsByTagName('ul')[0]; var timer; var speed = -2; oUl1.innerHTML += oUl1.innerHTML; oUl1.style.width = '800px'; function move(){ if(oUl1.offsetLeft < -oUl1.offsetWidth/2){ oUl1.style.left = '0px'; } if(oUl1.offsetLeft > 0){ oUl1.style.left = -oUl1.offsetWidth/2 + 'px'; } oUl1.style.left = oUl1.offsetLeft + speed + 'px'; } timer = setInterval(move,30); oUl1.onmouseover = function(){ clearInterval(timer); } oUl1.onmouseout = function(){ timer = setInterval(move,30); } document.getElementsByTagName('a')['0'].onclick = function(){return speed = -2}; document.getElementsByTagName('a')['1'].onclick = function(){return speed = 2}; } </script> </head> <body> <a href="javascricp:;">向左</a> <a href="javascricp:;">向右</a> <div id="div1"> <ul id='ul1'> <li><img src="https://p1.so.qhmsg.com/bdr/_240_/t017fa86a892f1b4e06.jpg"></li> <li><img src="https://p1.so.qhimgs1.com/bdr/_240_/t01e758a4a1c8f3cf8d.jpg"></li> <li><img src="https://p1.so.qhmsg.com/bdr/_240_/t01690c2b67a8ae28a6.jpg"></li> <li><img src="https://p0.so.qhimgs1.com/bdr/_240_/t0174cbb4ffbbac0510.jpg"></li> </ul> </div> </body></html>文章转载于:https://www.jianshu.com/p/157f05206125
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录！
立即登录