JS实现图片循环滚动

全栈程序员站长

发布于 2022-09-09 10:25:01

19.7K0

发布于 2022-09-09 10:25:01

大家好，又见面了，我是你们的朋友全栈君。

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

效果如下：