关于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的具体使用的更多相关文章

  1. JavaScript函数setInterval()和setTimeout()正确的写法

    一.常规写法 1.1 不传参数 function a (x, y) { var i = 0; var b = function(){ console.log((x * y) + (i++)); } r ...

  2. javascript 使用 setInterval 实现倒计时

    javascript 使用 setInterval 实现倒计时 var timer = setInterval(function () { console.log(valid_time); if (v ...

  3. javascript函数setInterval和setTimeout的使用区别详解

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  4. (二)学习JavaScript之setInterval和clearInterval方法

    参考:http://www.w3school.com.cn/jsref/met_win_setinterval.asp HTML DOM Window 对象 定义和用法 setInterval() 方 ...

  5. JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeou ...

  6. javascript中setInterval制作跑马灯的效果

    html代码: javascript代码 <script type="text/javascript"> function scroll() { var title = ...

  7. JavaScript中setInterval函数应用常见问题之一（第一个参数不加引号与加引号的区别）

    学过JavaScript 脚本语言的都应该接触过setInterval 函数.如何使用我想大家都知道,但是有时候对于刚刚接触JavaScript的朋友来讲,还是会在使用的时候碰到这样或那样的问题而感到 ...

  8. JavaScript中setInterval关闭问题

    这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...

  9. JavaScript之setInterval() 函数

    定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被 ...

  10. JavaScript中setInterval的用法总结

    setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...

随机推荐

  1. [每日一题2020.06.15]P1226 【模板】快速幂取余运算

    我是题目 快速幂就是快速求 \(a^b\)的一种算法 快速幂 思想 : 比如我要求 \(6^9\) 首先将幂转化为二进制形式 : \[6^9 = 6^{1001} \tag{1} \] 可以得到 : ...

  2. TensorFlow从0到1之TensorFlow逻辑回归处理MNIST数据集（17）

    本节基于回归学习对 MNIST 数据集进行处理,但将添加一些 TensorBoard 总结以便更好地理解 MNIST 数据集. MNIST由https://www.tensorflow.org/get ...

  3. 通过数据库客户端界面工具DBeaver连接Hive

    前言 本文讲解如何通过数据库客户端界面工具DBeaver连接hive,并解决驱动下载不下来的问题. 1.为什么使用客户端界面工具 为什么使用客户端界面工具而不用命令行使用hive 通过界面工具查看分析 ...

  4. 华为海思搞定4K60fps！Vmate掌上云台相机国内首发

    目录 Snoppa Vmate Snoppa Vmate Snoppa Vmate是一款掌上型的高性能4K摄像机,集成了微型机械三轴增稳云台,一体化机身集成可操控式触摸屏,既可以独立使用,也可以无线连 ...

  5. Java中的map集合顺序如何与添加顺序一样

    一般使用map用的最多的就是hashmap,但是hashmap里面的元素是不按添加顺序的,那么除了使用hashmap外,还有什么map接口的实现类可以用呢? 这里有2个,treeMap和linkedH ...

  6. PowerBuilder中DW如何手动触发事件

    调用setitem默认不会触发itemchanged事件 如果想实现可手动触发itemchanged事件 事件格式如下: dw_list.event itemchanged( /*long row*/ ...

  7. 深入理解JVM（③）低延迟的Shenandoah收集器

    前言 Shenandoah作为第一款不由Oracle(包括一起的Sun)公司的虚拟机团队所领导开发的HotSpot垃圾收集器.是只存在于OpenJDK当中的,最初由RedHat公司创建的,在2014年 ...

  8. CentOS7 开机进入emergency mode

    今天突然操作了一下磁盘挂载,然后系统启动之后,就直接进入emergency模式了,然后只能输入密码进行救援,截图如下: 突然想了一下最近的一次操作,是因为要挂在镜像,然后每次开机都要挂载一次,觉得比较 ...

  9. Python多核编程mpi4py实践及并行计算-环境搭建篇

    1.安装python,这个没什好说的,直接装就行 2.做并行计算.数据挖掘,机器学习等一般都要用的numpy,这个在Windows版本上安装有点问题,安装比较麻烦,建议在linux上搭建环境 3.安装 ...

  10. Flink 集群搭建,Standalone,集群部署,HA高可用部署

    基础环境 准备3台虚拟机 配置无密码登录 配置方法:https://ipooli.com/2020/04/linux_host/ 并且做好主机映射. 下载Flink https://www.apach ...