JavaScript之setinterval的具体使用

2019-05-05 08:50:54 阅读：236 来源： 互联网

标签：style setinterval JavaScript list setInterval width 具体 wrap left

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

标签：style,setinterval,JavaScript,list,setInterval,width,具体,wrap,left
来源： https://www.cnblogs.com/shuai1991/p/10810822.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript之setinterval的具体使用