关于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. python模拟网站登陆-滑动验证码

    普通滑动验证 以http://admin.emaotai.cn/login.aspx为例这类验证码只需要我们将滑块拖动指定位置,处理起来比较简单.拖动之前需要先将滚动条滚动到指定元素位置. impor ...

  2. （二）JavaMail创建包含内嵌图片的邮件

    链接:https://blog.csdn.net/qq_41151659/article/details/96475739 代码如下: import com.sun.mail.util.MailSSL ...

  3. 使用Apache commons email发送邮件

    今天研究了以下怎么用java代码发送邮件,用的是Apache的commons-email包. 据说这个包是对javamail进行了封装,简化了操作. 这里讲一下具体用法吧 一.首先你需要有邮箱账号和一 ...

  4. rust 神奇的特质

    pub trait Summary { fn summarize_author(&self) -> String; fn summarize(&self) -> Strin ...

  5. liunx 常用快捷键

    1.命令行快捷键ctrl + a //把光标移动到最前面ctrl + e //把光标移动到最后面ctrl + l //清屏ctrl + c //取消ctrl + u //把光标到行首的删除ctrl + ...

  6. Beta冲刺<10/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第十天(05.28) 作业正文 如下 其他参考文献 ... B ...

  7. AOF文件的写入与同步

    在 Redis 中客户端向服务器发送相关写命令请求,这时服务器中有个用于处理这些命令的事件循环进程,对这些命令进行处理,并将相关信息处理的结果反馈给客户端,如:"OK",等.同时, ...

  8. 在Java虚拟机上班是一种怎样的体验？

    228 人赞同了该回答 利益相关,匿了! JVM公司里面线程众多,派系林立,尤其是执行引擎那波人,因为是核心部门,经常diss别的部门. 428 人赞同了该回答 不请自来. 其实在JVM工作没有你们想 ...

  9. 并发编程之详解InheritableThreadLocal类原理

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 在Java并发编 ...

  10. TCP实战一(三握四挥、流量控制)

    上一篇博文已经介绍了tcpdump的一些基本操作与命令,今天这篇博文将带你解密如何利用wireshark对tcpdump抓到的数据包进行可视化分析! 参考文献:https://zhuanlan.zhi ...