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 ...
随机推荐
- Python中的计时函数
我们已经知道使用cell magic或者line magic里面的%%time或者%time能够对Python程序中某一模块的运行时间进行计算,下面是一种更为灵活的计时方法,利用了计时函数time.t ...
- Linux下常用命令(持续更新)
l: 列举目录下的所有文件 ll: 显示详细属性 pwd: 查看当前所在完整路径 cd: 变更文件夹(变更到根目录:cd + /:变更到上级目录:cd + ..) sudo: 允许利用超级用户权限执行 ...
- 商城06——solr索引库搭建&solr搜索功能实现&图片显示问题解决
1. 课程计划 1.搜索工程的搭建 2.linux下solr服务的搭建 3.Solrj使用测试 4.把数据库中的数据导入索引库 5.搜索功能的实现 2. 搜索工程搭建 要实现搜索功能,需要搭建 ...
- 【django】CMS开发笔记一:虚拟环境配置
项目代码:https://github.com/pusidun/CMS-django 使用虚拟环境 虚拟环境是Python解释器的虚拟副本.在虚拟环境中安装私有包,不会影响全局的Python解释器.可 ...
- 十万同时在线用户，需要多少内存？——Newbe.Claptrap 框架水平扩展实验
Newbe.Claptrap 项目是笔者正在构建以反应式.Actor模式和事件溯源为理论基础的一套服务端开发框架.本篇我们将来了解一下框架在水平扩展方面的能力. 前情提要 时隔许久,今日我们再次见面. ...
- 【初学Java学习笔记】SQL语句调优
1, 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2,应尽量避免在 where 子句中对字段进行 null 值判断,创建表时NULL是默认 ...
- 阿里巴巴--java多线程的两种实现方式，以及二者的区别
阿里巴巴面试的时候,昨天问了我java面试的时候实现java多线程的两种方式,以及二者的区别当时只回答了实现线程的两种方式,但是没有回答上二者的区别: java实现多线程有两种方式: 1.继承Thre ...
- linux中神奇的命令alias
在linux中大家应该都知道,有些命令和参数特别繁琐,而且还是大量输入这些命令,这个时候我们就可以使用linux中的alias命令来给这些繁琐的命令起别名,但是,alias 命令只对当前终端有效,当终 ...
- python黑帽子之tcp客户端
在渗透测试过程中,我们经常会需要创建一个tcp客户端来连接服务,发送垃圾数据,进行模糊测试等任务,所以我们来用python创建一个简单的tcp客户端. import sockettarget_host ...
- Python3笔记018 - 4.3 元组
第4章 序列的应用 python的数据类型分为:空类型.布尔类型.数字类型.字节类型.字符串类型.元组类型.列表类型.字典类型.集合类型 在python中序列是一块用于存放多个值的连续内存空间. py ...