JavaScript之setinterval的具体使用

关于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>
View Code

这是一个简单的无缝滚动的布局

 <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>
View Code

最外面一层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 = '0'
      }
      if(list_wrap.offsetLeft>0){ // 当宽度等于一半的时候，让他left为0
        list_wrap.style.left = -list_wrap.offsetWidth/2+'px'
      }
    }
View Code

现在我们封装一个让他运动的方法   去决定向左向右滚动以及当他滚动到最后我们应该做什么处理

接下来就是我们的主角上场了

    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 = '0'
      }
      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>
View Code

 

posted @ 2019-05-05 08:28  帅某人是也  阅读(1865)  评论(0)  编辑  收藏  举报