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

JavaScript之setinterval的具体使用

猜你喜欢