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 ...
随机推荐
- TensorFlow从0到1之TensorFlow实现反向传播算法(21)
反向传播(BPN)算法是神经网络中研究最多.使用最多的算法之一,它用于将输出层中的误差传播到隐藏层的神经元,然后用于更新权重. 学习 BPN 算法可以分成以下两个过程: 正向传播:输入被馈送到网络,信 ...
- git添加所有新文件
git add -A 提交所有变化 git add -u 提交被修改(modified)和被删除(deleted)文件,不包括新文件(new) git add . 提交新文件(new)和被修改(mod ...
- sockaddr_in与sockaddr区别
先粘代码 struct sockaddr { __SOCKADDR_COMMON (sa_); /* Common data: address family and length. */ char s ...
- cb45a_c++_STL_算法_删除_(3)_unique(唯一的意思)删除连续性的重复的数据
cb45a_c++_STL_算法_删除_(3)_unique(唯一的意思)删除连续性的重复的数据unique(b,e),删除连续性的,删除重复的数据,比如如果有两个连续的5,5,则留下一个.uniqu ...
- vc6.0创建文件时,出现很多烫烫烫解决方法
vc6.0创建文件时,出现很多烫烫烫烫解决方法 SWM2烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫.IA 如果项目文件放在桌面上 如:C:\Documents and Settings\txwtec ...
- 特性速览| Apache Hudi 0.5.3版本正式发布
1. 下载连接 源代码下载:Apache Hudi 0.5.3 Source Release (asc, sha512) 0.5.3版本相关jar包地址:https://repository.apac ...
- LeetCode 79,这道走迷宫问题为什么不能用宽搜呢?
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第48篇文章,我们一起来看看LeetCode当中的第79题,搜索单词(Word Search). 这一题官方给的难 ...
- windows RN 环境搭建(实测心得)
首先安装官网的装好依赖 这里特别敲掉的是 jdk 必须要1.8的才行: 装了node 就不要 py了. 官网 其次安装 android studio 开发工具 把对应的都装好: 这里的 ...
- 黎活明8天快速掌握android视频教程--17_创建数据库与完成数据添删改查
1.我们首先来看下整个项目 项目也是采用mvc的框架 package dB; import android.content.Context; import android.database.sqlit ...
- Pytorch入门——手把手带你配置云服务器环境
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天这篇是Pytorch专题第一篇文章. 大家好,由于我最近自己在学习Pytorch框架的运用,并且也是为了响应许多读者的需求,推出了这个P ...