JS实现图片循环滚动

JS实现图片循环滚动之前在前端的时候有遇到这样一个问题,实现JS图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器,代码如下:<!DOCTYPE><html> <head> <metacharset=”UTF-8″> <title>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>

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161304.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SP网站SelectSql和searchSql的区别

    SP网站SelectSql和searchSql的区别新入行小白,如有不足请多指教。SP网站进行二次开发,需要对VS开发的页面内的自定义列表行进行删除,需求是用户或者项目经理只能查到并且删除自己的列表。最终发现将源码searchSql改为SelectSql,页面成功显示。此代码中searchSql代表显示所有信息,SelectSql显示特定信息。修改别人的代码真头大。

  • K8S报错异常锦集(持续更新)

    K8S报错异常锦集(持续更新)

  • mybatis log plugin激活码-激活码分享

    (mybatis log plugin激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~W…

  • DP和HDMI区别「建议收藏」

    转自:https://www.toutiao.com/i6877677362054595080在目前市面上显示器接口中,VGA和DVI已经逐渐退出了历史舞台,Type-C还算是小众,而DP(DisplayPort)与HDMI则成为了主流产品的标配,目前的主流级显卡也是以这两个输出接口为主,而新的问题也随之诞生了:当这两个接口都可以使用的时候,选择哪个会更好?对于大部分普通的消费者来说,显示器能跟主机正常连接就行,随便哪个接口都无所谓,反正能正常使用,但是对于DIY玩家来说,这个问题就显得非常重要

  • srvctl命令_clc命令

    srvctl命令_clc命令SRVCTL命令可以控制RAC数据库中的instance,listener以及services。通常SRVCTL在ORACLE用户下执行。下面我们来介绍srvctl命令。1、通过SRVCTL命令来start/stop/check所有的实例:$srvctlstart|stop|statusdatabase-d<db_name>2、start/stop指定的实例:$srvctl…

  • 微信公众号中ip白名单用谁的ip

    微信公众号中ip白名单用谁的ip

    2021年10月12日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号