JavaScript之setinterval的具體使用

時間 2019-12-15

標籤 javascript setinterval 具體使用欄目 JavaScript 简体版

原文原文鏈接

關於setInterval在api文檔中也有很詳細的解釋，好比下面那兩個：html

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。api

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。ide

這樣的解釋有點官方，看起來有點繞，接下來咱們經過實際例子來看就知道了，經過控制器的開啓關閉來作一個無縫滾動函數

  <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.lengthui

list_wrap.style.width = list[0].offsetWidth*list.length+'px'

list_wrap.innerHTML += list_wrap.innerHTML

因爲無縫滾動，咱們須要設置雙倍的寬度才行，因此這裏用 +=去計算spa

無縫滾動實際就是一個障眼法code

    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

如今咱們封裝一個讓他運動的方法去決定向左向右滾動以及當他滾動到最後咱們應該作什麼處理htm

接下來就是咱們的主角上場了

    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>