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实现图片循环滚动相关推荐

3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果.se ...
html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
cocos2d（背景图片循环滚动）
背景图片循环滚动使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInter ...
html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
1、跑马灯之图片循环滚动
最近,公司做了好几个项目,第一个项目首页跑马灯的效果是我们亲爱滴组长同学写的,后面跑马灯的需求改变了而组长同学又搞别的路去了,于是把我叫了过去,组长很亲切滴对我讲,I am very busy, R ...
【js特效】图片循环滚动代码
1.效果图如下: 2.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

JS实现图片循环滚动

JS实现图片循环滚动相关推荐

最新文章

热门文章