关于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. Android学习笔记ActionView

    概念 案例 1.布局文件 activity_main.xml <?xml version="1.0" encoding="utf-8"?> < ...

  2. 如何在VMware虚拟机中安装CentOS6.7系统(上篇)

    之前给大家分享了在VMware中如何创建CentOS虚拟机,今天给大家分享一下如何在虚拟机中安装CentOS系统,以CentOS6.7系统为例,其他的系统版本也可以参考该教程进行类似处理,具体的流程如 ...

  3. JAVA设计模式 1 设计模式介绍、单例模式的理解与使用

    数据结构我们已经学了一部分了.是该了解了解设计模式了.习惯了CRUD的你,也该了解了解这一门神器.我为啥要说是神器呢? 因为在大厂的面试环节.以及很多的比如 Springboot Mybatis 等开 ...

  4. PHP丨PHP基础知识之条件语SWITCH判断「理论篇」

    Switch在一些计算机语言中是保留字,其作用大多情况下是进行判断选择.以PHP来说,switch(开关语句)常和case break default一起使用 典型结构 switch($control ...

  5. Flutter学习笔记（36）--常用内置动画

    如需转载,请注明出处:Flutter学习笔记(36)--常用内置动画 Flutter给我们提供了很多而且很好用的内置动画,这些动画仅仅需要简单的几行代码就可以实现一些不错的效果,Flutter的动画分 ...

  6. 图解 Git 基本命令 merge 和 rebase

    Git 基本命令 merge 和 rebase,你真的了解吗? 前言 Git 中的分支合并是一个常见的使用场景. 仓库的 bugfix 分支修复完 bug 之后,要回合到主干分支,这时候两个分支需要合 ...

  7. 面试题40：最小的 k 个数

    import java.util.Arrays; /** * Created by clearbug on 2018/2/26. * * 面试题40:最小的 k 个数 * * 注意:因为前两天在陌陌面 ...

  8. 使用json-server与Mockjs搭建模拟服务

    为什么使用 在项目开发中,常常需要边写前端页面边写后端接口,但是后端接口服务往往是滞后于前端开发的,或者是不能及时提供的.出于前端开发的迅速和便捷去考虑,我们可以根据后端接口数据结构去模拟(mock) ...

  9. Spring IoC 自定义标签解析

    前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...

  10. Python实用笔记 （4）循环

    for...in循环 names = ['Michael', 'Bob', 'Tracy'] for name in names: print(name) 运行如下: Michael Bob Trac ...