JS实现图片循环滚动

最新推荐文章于 2024-04-15 13:49:29 发布

魔鬼啊魔鬼

最新推荐文章于 2024-04-15 13:49:29 发布

阅读量8.3k

点赞数 5

文章标签： js 图片滚动

本文链接：https://blog.csdn.net/weixin_44544742/article/details/98585235

版权

之前在前端的时候有遇到这样一个问题，实现 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.innerHTML
				function 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>

效果如下：
在这里插入图片描述

魔鬼啊魔鬼

关注

5
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，代码如下：<!DOCTYPE><html> <head> <meta charset="UTF-8"> <title>JS实...
复制链接

扫一扫