JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能詳解

更新時間：2019年01月09日 10:52:12 作者：致Great

這篇文章主要介紹了JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能,結合實例形式分析了javascript定時器與頁面元素屬性動態(tài)設置等相關操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript學習筆記之基于定時器實現(xiàn)圖片無縫滾動功能。分享給大家供大家參考，具體如下：

一、無縫滾動理論基礎

基礎知識

1.setInterval（function，time）、clearInterval（timer）

setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。
setInterval() 方法會不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值。

2.offsetLeft與style.left的區(qū)別

offsetLeft 獲取的是相對于父對象的左邊距

left 獲取或設置相對于具有定位屬性(position定義為relative)的父對象的左邊距

如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對于父div的值，

這同offsetLeft是相同的，區(qū)別在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是數(shù)值28，如果需要對取得的值進行計算，還用offsetLeft比較方便。
2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。
3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗，如果定義在css里，style.left的值仍然為空，這就是我剛開始碰到的問題，總是取不到style.left的值。

offsetLeft則仍然能夠取到，無需事先定義div的位置。

二、代碼片段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>無縫滾動</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #div2{
      width: 400px;
      margin: 100px auto;
    }
    input{
      margin:0 auto;
      text-align: center;
      margin-left: 80px;
      font-size: 40px;
    }
    #div1{
      width: 712px;
      height: 108px;
      margin: 100px auto;
      position: relative;
      background-color: red;
      overflow: hidden;
    }
    #div1 ul{
      position: absolute;
      left: 0;
      top: 0;
    }
    #div1 ul li{
      float: left;
      width: 178px;
      height: 108px;
      list-style:none;
    }
  </style>
  <script>
    window.onload=function(){
      var oDiv=document.getElementById('div1');
      var oUl=document.getElementsByTagName('ul')[0];
      var aLi=oUl.getElementsByTagName('li');
      var lBtn=document.getElementById('lbtn');
      var rBtn=document.getElementById('rbtn');
      //將ul復制一份相加復制給ul（這樣ul相當于有8張圖片）
      oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
      oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
      //speed控制圖片移動方向和速度
      var speed=2;
      function move(){
        if(oUl.offsetLeft<-oUl.offsetWidth/2){
          oUl.style.left=0;
        }
        if(oUl.offsetLeft>0)
        {
          oUl.style.left=-oUl.offsetWidth/2+'px';
        }
        oUl.style.left=oUl.offsetLeft+speed+'px';
      }
      var timer=setInterval(move,30);
      // 鼠標移進時，圖片停止運動
      oDiv.onmouseover=function(){
        clearInterval(timer);
      };
      //鼠標移出時，圖片繼續(xù)移動
      oDiv.onmouseout=function(){
      timer=setInterval(move,30);
      }
      //按鈕控制移動方向
      lBtn.onclick= function () {
        speed=-2;
      }
      rBtn.onclick=function(){
        speed=2;
      }
    };
  </script>
</head>
<body>
<div id="div2" >
  <input type="button" value="向左" id="lbtn"/>
  <input type="button" value="向右" id="rbtn"/>
</div>
  <div id="div1">
    <ul>
      <li><img src="images/1.jpg" alt=""/></li>
      <li><img src="images/2.jpg" alt=""/></li>
      <li><img src="images/3.jpg" alt=""/></li>
      <li><img src="images/4.jpg" alt=""/></li>
    </ul>
  </div>
</body>
</html>

三、效果圖