JavaScript之setinterval的具体使用
关于setInterval在api文档中也有很详细的解释，比如下面那两个：
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
这样的解释有点官方，看起来有点绕，接下来我们通过实际例子来看就知道了，通过控制器的开启关闭来做一个无缝滚动
<button class='left'>left</button>
<div class='wrap'>
<ul class='list_wrap'>
<li><img src="./img/0.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
</ul>
</div>
<button class='right'>right</button>
这是一个简单的无缝滚动的布局
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 760px;
margin: 0 auto;
overflow: hidden;
position: relative;
height:108px;
background: red;
}
.list_wrap{
width: 760px;
position: absolute;
left: 0;
}
.list_wrap >li{
list-style: none;
float: left;
width: 190px;
}
.list_wrap >li>img{
width: 100%;
}
</style>
最外面一层div包裹着里面的ul li ul以定位的形式固定在div里面
在写动画的时候，我们需要计算下ul的宽度，并且让他等于li.offsetWidth*li.length
list_wrap.style.width = list[0].offsetWidth*list.length+'px' list_wrap.innerHTML += list_wrap.innerHTML
由于无缝滚动，我们需要设置双倍的宽度才行，所以这里用 +=去计算
无缝滚动实际就是一个障眼法
function move(){
list_wrap.style.left = list_wrap.offsetLeft+spead+'px' // 动画往哪边滚动 +为右 - 为左
if(list_wrap.offsetLeft<-list_wrap.offsetWidth/2){ // 当宽度等于一半的时候，让他left为0
list_wrap.style.left = ''
}
if(list_wrap.offsetLeft>0){ // 当宽度等于一半的时候，让他left为0
list_wrap.style.left = -list_wrap.offsetWidth/2+'px'
}
}
现在我们封装一个让他运动的方法 去决定向左向右滚动以及当他滚动到最后我们应该做什么处理
接下来就是我们的主角上场了
var timer = setInterval(move,30)
我们在这里setInterval里面调用这个方法，让他去执行运动方法
现在我们添加树胶移入移出事件的扩展方法
wrap.onmouseover = function () {
clearInterval(timer)
}
wrap.onmouseout = function () {
timer = setInterval(move,30)
}
当鼠标移入的时候我们清除定时器，鼠标移出再开启定时器
定时器的用法无非就这两种，开启关闭
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 760px;
margin: 0 auto;
overflow: hidden;
position: relative;
height:108px;
background: red;
}
.list_wrap{
width: 760px;
position: absolute;
left: 0;
}
.list_wrap >li{
list-style: none;
float: left;
width: 190px;
}
.list_wrap >li>img{
width: 100%;
}
</style>
</head>
<body>
<button class='left'>+</button>
<div class='wrap'>
<ul class='list_wrap'>
<li><img src="./img/0.jpg" alt=""></li>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
</ul>
</div>
<button class='right'>-</button>
<script>
var wrap = document.getElementsByClassName('wrap')[0]
var list_wrap = document.getElementsByClassName('list_wrap')[0]
var list = list_wrap.getElementsByTagName('li')
var left = document.getElementsByClassName('left')[0]
var right = document.getElementsByClassName('right')[0]
var spead = 2 // 控制向左向右快慢
list_wrap.innerHTML += list_wrap.innerHTML // 计算ul的宽度
list_wrap.style.width = list[0].offsetWidth*list.length+'px' function move(){
list_wrap.style.left = list_wrap.offsetLeft+spead+'px' // 动画往哪边滚动 +为右 - 为左 if(list_wrap.offsetLeft<-list_wrap.offsetWidth/2){ // 当宽度等于一半的时候，让他left为0
list_wrap.style.left = ''
}
if(list_wrap.offsetLeft>0){ // 当宽度等于一半的时候，让他left为0
list_wrap.style.left = -list_wrap.offsetWidth/2+'px'
}
} var timer = setInterval(move,30)
wrap.onmouseover = function () {
clearInterval(timer)
}
wrap.onmouseout = function () {
timer = setInterval(move,30)
}
right.onclick = function () {
spead = 2
}
left.onclick = function () {
spead = -2
}
</script>
</body>
</html>
JavaScript之setinterval的具体使用的更多相关文章
- JavaScript函数setInterval()和setTimeout()正确的写法
一.常规写法 1.1 不传参数 function a (x, y) { var i = 0; var b = function(){ console.log((x * y) + (i++)); } r ...
- javascript 使用 setInterval 实现倒计时
javascript 使用 setInterval 实现倒计时 var timer = setInterval(function () { console.log(valid_time); if (v ...
- javascript函数setInterval和setTimeout的使用区别详解
setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...
- (二)学习JavaScript之setInterval和clearInterval方法
参考:http://www.w3school.com.cn/jsref/met_win_setinterval.asp HTML DOM Window 对象 定义和用法 setInterval() 方 ...
- JavaScript中SetInterval与setTimeout的用法详解
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeou ...
- javascript中setInterval制作跑马灯的效果
html代码: javascript代码 <script type="text/javascript"> function scroll() { var title = ...
- JavaScript中setInterval函数应用常见问题之一（第一个参数不加引号与加引号的区别）
学过JavaScript 脚本语言的都应该接触过setInterval 函数.如何使用我想大家都知道,但是有时候对于刚刚接触JavaScript的朋友来讲,还是会在使用的时候碰到这样或那样的问题而感到 ...
- JavaScript中setInterval关闭问题
这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...
- JavaScript之setInterval() 函数
定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被 ...
- JavaScript中setInterval的用法总结
setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...
随机推荐
- firda安装和使用
frida是一个轻量级别的hook框架. frida由两部分组成:一部分是运行在系统上的交互工具frida CLI,另一部分是运行在目标机器上的代码注入工具frida-server. 推荐使用pyth ...
- [CQOI2007]矩形
题目 点这里看题目. 分析 插头 DP ,考虑枚举一下两块之间的分割线,本质上就是两个端点都在边界上的路径. DP 过程中,我们将没有端点在边界上面的路径称为 1 路径,反之叫 2 路径 ...
- @luogu - P6109@ [Ynoi2009]rprmq
目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一个 n×n 的矩阵 a,初始全是 0,有 m 次修改操作和 ...
- 《Java并发编程的艺术》 第9章 Java中的线程池
第9章 Java中的线程池 在开发过程中,合理地使用线程池能带来3个好处: 降低资源消耗.通过重复利用已创建的线程 降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创 ...
- MFC的Spin Control基础控件的使用
1.向GUI界面添加一个MFC 提供的Spin数值调节控件 2.设置其"伙伴“,并设置数值调节的范围 3.如何让数值显示在文本框中?你可以有多种选择:可以让文本框控件绑定一个数值类型的变量: ...
- Ngnix 配置文件快速入门
转自https://www.cnblogs.com/knowledgesea/p/5175711.html 其实也没什么好说的,我想大部分人也不会在意nginx的实现原理啥的.服务器要部署的时候,把n ...
- 【初学Java学习笔记】SQL语句调优
1, 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2,应尽量避免在 where 子句中对字段进行 null 值判断,创建表时NULL是默认 ...
- Java 中的数据结构类 Vector 和 ArrayList
今天刷算法题目时,使用到了 Java 的内置栈类 Stack,好奇它是怎么实现的,发现它是继承于 Vector 这个类.那么,就先学习下 Vector 这个类的实现吧! Vector 和 ArrayL ...
- 前端基础：深入浅出 TCP/IP 协议栈
一个主机的数据要经过哪些过程才能发送到对方的主机上 参考:https://www.cnblogs.com/onepixel/p/7092302.html 首先我们梳理一下每层模型的职责: 链路层:对0 ...
- DOM-BOM-EVENT（2）
2.获取DOM元素的方法 2.1.getElement系列 documentElementById 通过id获取元素 <div id="box"></div> ...