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)
blank

相关推荐

  • getparameter和getparametervalues的区别[通俗易懂]

    getparameter和getparametervalues的区别[通俗易懂]request.getParameterValues(Stringname)是获得如checkbox类(名字相同,但值有多个)的数据。接收数组变量,如checkobx类型request.getParameter(Stringname)是获得相应名的数据,如果有重复的名,则返回第一个的值.接收一般变量,如text类型例:1.三个名字相同的tex

  • 【Leetcode】Pascal&#39;s Triangle II

    【Leetcode】Pascal&#39;s Triangle II

  • 【Tensorflow2.0】Tensorflow2.x的安装教程

    【Tensorflow2.0】Tensorflow2.x的安装教程anaconda可以使tensorflow的安装变的简单昨天tensorflow开发者大会刚开完,会上发布了关于TensorFlow2.0,TensorFlowLite,TensorFlow.js,SwiftforTensorFlow,TFX等产品生态体系的最新更新和首次发布的内容,2019年任会支持tensorflow1.x,但是我们相信,版本的升级会带来易用性和使用性能的提升…

  • Delphi2007 下安装ActiveX控件[通俗易懂]

    Delphi2007 下安装ActiveX控件[通俗易懂]此英文文章来自codegear官方网站,但是是讲在BDS2006 下如何安装,我在delphi2007下用此方法,一样通过,原文如下 Description:HowtoimportanActiveXcontrolinBDS2006?Answer/Solution:Herestheprocedureforimportingandinstalling

  • 12款Py程序员必备PyCharm插件,亲测过~推荐

    12款Py程序员必备PyCharm插件,亲测过~推荐最近使用Python,烧脑的我,使用编程软件肯定少不了去安装一些非常好用的插件,目的为了代码高效和方便的开发。以下是我亲测过的一些插件,很实用!!!!下载位置在输入框种输入要安装的插件名称即可下载。插件合集1..ignore我们做的每个Git项目中都需要一个“.gitignore”文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。2.CSVPlugin(必备推荐)它可以让CSV各个列之间区别明显,很清晰的显示各种颜色的高亮.3.CodeGlan..

  • android toast的用法_toast 安卓

    android toast的用法_toast 安卓AndroidToast用于在手机屏幕上向用户显示一条信息,一段时间后信息会自动消失。信息可以是简单的文本,也可以是复杂的图片及其他内容(显示一个view)。1.简单用法Toast.makeText(midlet.getApplicationContext(),”用户名不能为空”,Toast.LENGTH_LONG).show();2.自定义显示位置效果代码toast=Toast.mak…

发表回复

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

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