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.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>

效果如下:

你可能感兴趣的:(js,图片滚动)