关于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. c常用函数-sprintf

    sprintf sprinti函数的作用是把一个字符串格式化后输入到另一个字符串中,然后返回写入的·字符数量. Sprinf在用法上和1.2.3节的prinf函数一致,区别是sprintf输出结果到指 ...

  2. Cookie 和 Session 关系详解

     什么是 Cookie 和 Session ? 什么是 Cookie HTTP Cookie(也叫 Web Cookie或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在 ...

  3. Java容器面试总结

    1.List,Set,Map三者的区别? List:用于存储一个有序元素的集合. Set:用于存储一组不重复的元素. Map:使用键值对存储.Map会维护与Key有关联的值.两个Key可以引用相同的对 ...

  4. 《Java核心技术》笔记：第7章 异常、断言和日志

    1. 异常 (P 280)异常处理需要考虑的问题: 用户输入错误 设备错误 物理限制 代码错误 (P 280)传统的处理错误的方法是:返回一个特殊的错误码,常见的是返回-1或者null引用 (P 28 ...

  5. [ 头皮发麻 A1 ] 队内赛3 2020 Ateneo de Manila University DISCS PrO HS Division

    都是英语阅读题 但是本菜鸡就过了一题,直接自闭mmp明天开始起床一版题 传送门 B.Riana and the Blind Date 0是闰年?惊了 后来才知道整除被除数可以为0 闰年的计算方法 \( ...

  6. Dubbo的使用及原理

    Dubbo是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo[]是 ...

  7. SSH网上商城一

    Java高级项目之SSH网上商城项目实战: 1.采用目前最主流的三大框架开发即Struts2+Spring+Hibernate框架整合开发.2.通过AJAX技术提供良好的用户体验.3.提供了邮箱激活的 ...

  8. Scala创建SparkStreaming获取Kafka数据代码过程

    正文 首先打开spark官网,找一个自己用版本我选的是1.6.3的,然后进入SparkStreaming   ,通过搜索这个位置找到Kafka, 点击过去会找到一段Scala的代码 import or ...

  9. js事件入门（2）

    2.鼠标事件 鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. 2.1.onmousedown 鼠标按下的时候触发的事件 <!DOCTYPE html> <h ...

  10. 浅谈hash

    hash 算法介绍 hash说得通俗一点,就是给一个变量编上一个马甲 比如说一个人聪明可爱,举世无双,天资聪慧.活泼机灵...,那么就是叫我了(真不要脸 但是这样是不是显得些许麻烦? 于是人类发明了名 ...