當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现图片循环滚动
生活随笔
收集整理的這篇文章主要介紹了
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>效果如下：
總結
以上是生活随笔為你收集整理的JS实现图片循环滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何判断输入的是字符还是数字_[Leet
- 下一篇： java 旋转方向,Java 2d方向鼠