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 ...
随机推荐
- php5.5下安装pdflib的步骤
php5.5下安装pdflib的步骤 1. 下载pdflib 下载地址为:http://www.pdflib.com/download/pdflib-family/pdflib/ 然后选择对应的版本, ...
- .Net Core微服务入门全纪录（二）——Consul-服务注册与发现（上）
前言 上一篇[.Net Core微服务入门全纪录(一)--项目搭建]讲到要做到服务的灵活伸缩,那么需要有一种机制来实现它,这个机制就是服务注册与发现.当然这也并不是必要的,如果你的服务实例很少,并且很 ...
- Nirvana【思维+暴力优化】
Nirvana 题目链接(点击) Kurt reaches nirvana when he finds the product of all the digits of some positive i ...
- 【Spring注解驱动开发】面试官：如何将Service注入到Servlet中？朋友又栽了！！
写在前面 最近,一位读者出去面试前准备了很久,信心满满的去面试.没想到面试官的一个问题把他难住了.面试官的问题是这样的:如何使用Spring将Service注入到Servlet中呢?这位读者平时也是很 ...
- 微信小程序navigator带参数跳转及接收参数内容
// index.wxml <navigator class='looks-view' wx:for="{{imgUrlNew}}" wx:key="index&q ...
- Python3-threading模块-多线程
什么是线程? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 P ...
- Java是如何实现Future模式的？万字详解！
JDK1.8源码分析项目(中文注释)Github地址: https://github.com/yuanmabiji/jdk1.8-sourcecode-blogs 1 Future是什么? 先举个例子 ...
- 使用Apache Hudi构建大规模、事务性数据湖
一个近期由Hudi PMC & Uber Senior Engineering Manager Nishith Agarwal分享的Talk 关于Nishith Agarwal更详细的介绍,主 ...
- nova api报错network问题
安装openstack Rocky版本的时候,在未安装网络服务前,创建虚拟机,报以下错误 [root@controller2 nova]# openstack server create --flav ...
- 深入理解RocketMQ（四）--消息存储
一.MQ存储分类 MQ存储主要分为以下三类: 文件系统:RocketMQ/Kafka/RabbitMQ 关系型数据库DB:ActiveMQ(默认采用的KahaDB做消息存储)可选用JDBC的方式来做消 ...