JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，代码如下：

<!DOCTYPE>
<html><head><meta charset="UTF-8"><title>JS实现图片循环滚动</title><style>#roll {height: 340px;width: 1000px;margin: 0 auto;border: 1px solid #FF0000;position:relative;overflow: hidden;}#picture1 td {height: 300px;width: 230px;position:relative;}#picture2 td {height:300px;width: 230px;position:relative;}.xiao-one{height: 150px;width: 243px;border-radius: 10px;overflow: hidden;position: relative;}.xiao-one img{height: 72px;width: 72px;margin-left: 84px;margin-top: 22px;}.xiao-one p{width: 100%;color: #000;font-size: 18px;text-align: center;font-weight: bold;}.partner{margin-top: 12px;width: 100%;}p{padding: 0px;margin: 0px;}</style></head><body><div id=roll><div id=demo style="width:1000px;height:340px;overflow: hidden;background: url(imgs/合作校区背景图.png) no-repeat;background-size: 100% 100%;"><table>			<tr><td id=picture1><table><tr><td><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div><div class="xiao-one"><img style="margin-top: 20px;" src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div></td><td><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div><div class="xiao-one"><img style="margin-top: 20px;" src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div></td><td><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div><div class="xiao-one"><img style="margin-top: 20px;" src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div></td><td><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div></td><td><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>华南理工大学</p></div></div></td><td><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>广东海洋大学</p></div></div><div class="xiao-one"><img src="imgs/护眼模式_20190731101319.jpg"><div class="partner"><p>广东海洋大学</p></div></div></td></tr></table></td><td id=picture2></td></tr></table></div><script type=text/javascript>var speed = 10//控制数字快慢picture2.innerHTML = picture1.innerHTMLfunction Marquee() {if(demo.scrollLeft >= picture1.scrollWidth) {demo.scrollLeft = 0} else {demo.scrollLeft++}}var MyMar = setInterval(Marquee, speed)demo.onmouseover = function() {clearInterval(MyMar)//鼠标移上时清除定时器达到滚动停止的目的}demo.onmouseout = function() {//鼠标移开时重设定时器MyMar = setInterval(Marquee, speed)}</script></div></body>
</html>