关于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. 使用JFreeChart生成条形图

    1. 准备工作 下载JFreeChart,我使用的版本为1.0.19,相关内容参见JFreeChart,下载链接为https://sourceforge.net/projects/jfreechart ...

  2. 手写网页扫雷之css部分

    #ui{ text-align: center; } #saolei{ width: 500px; height: 500px; border: 1px solid #456345; margin: ...

  3. postman查看打印

    原文:https://www.jianshu.com/p/f165a99245e3 1.再postman中每个请求的 Pre-request Script和Tests中都可以写代码2.也可将值打印到C ...

  4. 涨姿势了解一下Kafka消费位移可好？

    摘要:Kafka中的位移是个极其重要的概念,因为数据一致性.准确性是一个很重要的语义,我们都不希望消息重复消费或者丢失.而位移就是控制消费进度的大佬.本文就详细聊聊kafka消费位移的那些事,包括: ...

  5. Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)

    背景交代 相信每个程序员都有自己做过个人网站,博客之类的项目了,但是现在还在维护吗?反正我前前后后做过2到3个了,维护一段时间后因为一些不可逆的原因(主要是懒)都没有维护了,购买的一些域名和服务器信息 ...

  6. uni-app之实现分页

    一.下载库 官方文档地址为:https://ext.dcloud.net.cn/plugin?id=32 点击下载zip压缩包即可,下载完毕后解压到放置前端相关组件目录,即components目录. ...

  7. WeChair项目Alpha冲刺(1/10)

    团队项目进行情况 1.昨日进展    因为是Alpha冲刺第一天,所以昨日进展无 2.今日安排 前端:完成前端页面的首页html+css部分 后端:搭建好SpringBoot项目以及完成实体类代码的编 ...

  8. MySQL-数据库和表的基本操作

    数据库和表的基本操作 数据库基础知识 创建数据库 CREATE DATABASE 数据库名称 ; 查看数据库(显示数据库名列表) SHOW DATABASES ; 查看某数据库信息(显示创建的信息) ...

  9. Spring 中Controller 获取请求参数的方法笔记

    1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"="application/ ...

  10. spring 整合redis集群中使用@autowire无效问题的解决办法

    1.视频参考黑马32期宜立方商城第6课 redis对于的代码 我们先变向一个redis客户端的接口文件 package com.test; public interface JedisClient { ...