快捷導(dǎo)航

JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)功能詳解

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

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

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

一、無(wú)縫滾動(dòng)理論基礎(chǔ)

基礎(chǔ)知識(shí)

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

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

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

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

offsetLeft 獲取的是相對(duì)于父對(duì)象的左邊距

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

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

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

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

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

二、代碼片段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>無(wú)縫滾動(dòng)</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復(fù)制一份相加復(fù)制給ul（這樣ul相當(dāng)于有8張圖片）
      oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
      oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
      //speed控制圖片移動(dòng)方向和速度
      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);
      // 鼠標(biāo)移進(jìn)時(shí)，圖片停止運(yùn)動(dòng)
      oDiv.onmouseover=function(){
        clearInterval(timer);
      };
      //鼠標(biāo)移出時(shí)，圖片繼續(xù)移動(dòng)
      oDiv.onmouseout=function(){
      timer=setInterval(move,30);
      }
      //按鈕控制移動(dòng)方向
      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>

三、效果圖