之前在前端的時候有遇到這樣一個問題，實現 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>
效果如下：
![vue解決v-for報錯 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key‘ directives](http://pic.xiahunao.cn/vue解決v-for報錯 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key‘ directives)
)
