var containerW=520;
ul.style.width=li.length * containerW + 'px';

ul.onmousedown=e=>{
 var startX=e.pageX ;
}

document.onmouseup=e=>{
	
	if(e.pageX - startX > containerW/3){
		this.iNow++;//上一張
	}else if(startX - e.pageX > containerW/3){
		this.iNow--;//下一張
	}
	ul.style.transition='.3s';
	ul.style.transform='translateX('+(this.iNow*containerW)+'px)';
	document.onmouseup=document.onmousemove=null;
}

了控制篇幅，本打算分3篇文章來講述輪播圖實現(xiàn)的，后來想了想，JS代碼量其實很少，完全沒必要，所以這篇文章就是收尾。

昨天，我們完成了結(jié)構(gòu)和布局設計，今天我們來完成JavaScript邏輯部分。我這人比較有代碼潔癖，不喜歡過多的變量污染全局作用域，習慣使用自執(zhí)行的匿名函數(shù)包裹一個功能塊。我們所有的JS代碼都在如下函數(shù)內(nèi)部編寫：

(function () {
  // ... ... 我們的代碼都寫到這兒
})();

我們的程序中需要用到多個DOM元素，所以我們先拿到它們的引用存儲到變量中。

/** @type {HTMLDivElement} 輪播圖容器 */
  const carouselWrapper=document.querySelector('.carousel-wrapper')
  /** @type {HTMLUListElement} banner列表元素 */
  const slides=carouselWrapper.querySelector('.slides')
  /** @type {HTMLDivElement} 指示器 */
  const indicator=carouselWrapper.querySelector('.indicators')
  /** @type {NodeListOf<HTMLLIElement>} 指示器節(jié)點列表 */
  const indicatorItems=indicator.querySelectorAll('.indicator-item')
  /** @type {HTMLUListElement} 導航按鈕列表元素 */
  const nav=carouselWrapper.querySelector('.nav')

接下來，我們定義一些常量和變量，建議大家定義常量名使用全大寫字母下劃線分割。

 /** 活動類名 */
  const ACTIVE_CLS_NAME='active'
  /** 左導航按鈕類名 */
  const CLS_NAME_NAV_LEFT='nav-left'
  /** 右導航按鈕類名 */
  const CLS_NAME_NAV_RIGHT='nav-right'
  /** 取消過渡的類名 */
  const CLS_NAME_NO_TRANSITION='no-transition'
  /** 定時器間隔 */
  const TIMER_DELAY=3000

  /** 定時器id */
  let timerId
  /** 當前指示器索引 */
  let currentIndex=0
  /** 當前banner索引 */
  let currentslideItemIndex=0
  /** 過渡結(jié)束標識 */
  let transitionendFlag=true

要做到左右滾動的無縫切換，我們必須至少拷貝banner列表中的第一和最后一個元素，將其追加到banner列表尾部，并更新banner列表的寬度。為了節(jié)省代碼，我完全拷貝了一份banner列表的子元素。我們用一個函數(shù)來做這件事，代碼如下：

function updateSlides() {
    slides.innerHTML +=slides.innerHTML
    slides.style.width=`${slides.childElementCount * 100}%`
  }

當用戶單擊指示器項的時候，我們需要切換當前顯示的banner圖。首先需要確定被單擊指示器項的索引。我們用一個函數(shù)來實現(xiàn)，代碼如下：

function getTargetIndex(el) {
    for (let i=0, len=indicatorItems.length; i < len; i++) {
      if (indicatorItems[i]===el) {
        return i
      }
    }
    return -1
  }

索引確定了，我們需要根據(jù)索引來更新X軸的平移值。當然，要實現(xiàn)左右滾動，我們還有其它實現(xiàn)方案，例如：改變可滾動元素的滾動條位置，改變元素的左右定位等。那么，為什么使用3D平移變換呢？原因之一就是，瀏覽器會對3D平移變換開啟GPU硬件加速渲染，以獲得更好的性能，直觀感受就是動畫非常絲滑，毫無拖泥帶水之感。我們用一個函數(shù)來更新X軸平移，代碼如下：

function updateTranslateX(index, targetIndex=-1) {
    // 如果過渡沒有結(jié)束，直接返回
    if (!transitionendFlag) return
    // 當前指示器移除活動類
    indicatorItems[currentIndex].classList.remove(ACTIVE_CLS_NAME)
    // 如果沒有提供目標索引，就把index賦給它
    if (targetIndex < 0) {
      targetIndex=index
    }
    // 目標指示器添加活動類
    indicatorItems[targetIndex].classList.add(ACTIVE_CLS_NAME)
    // 將當前索引設為目標索引
    currentIndex=targetIndex
    // 將當前banner索引設為index
    currentslideItemIndex=index
    // 改變banner列表元素的X軸平移變換
    slides.style.transform=`translateX(-${index / slides.childElementCount * 100}%)`
  }

以下是指示器單擊處理函數(shù)的實現(xiàn)。這個代碼很簡單，首先獲取目標指示器項的索引，如果找到了，就根據(jù)該索引更新banner列表的X軸平移。

/** @param {MouseEvent} e */
  function indicatorClickHandler(e) {
    const index=getTargetIndex(e.target)
    index >=0 && updateTranslateX(index)
  }

接下來，我們實現(xiàn)左右導航按鈕的單擊。首先，我們需要一個向左和向右滾動的函數(shù)，代碼如下：

function toNext() {
    // 指示器項的數(shù)量
    const len=indicatorItems.length
    if (currentIndex < len) {
      if (currentIndex===len - 1) {
        // 繼續(xù)滾動到下一個索引位置，并將目標索引設為0
        updateTranslateX(currentIndex + 1, 0)
      } else {
        updateTranslateX(currentIndex + 1)
      }
    } else {
      updateTranslateX(0)
    }
  }

  function toPrev() {
    const len=indicatorItems.length
    if (currentIndex < 1) {
      // 去掉過渡
      slides.classList.add(CLS_NAME_NO_TRANSITION)
      // 讓索引為len的banner圖可見
      updateTranslateX(len, len - 1)
      setTimeout(()=> {
        // 添加過渡
        slides.classList.remove(CLS_NAME_NO_TRANSITION)
        // 讓索引為len-1的banner圖可見，此時有過渡
        updateTranslateX(len - 1)
      }, 0)
    } else {
      updateTranslateX(currentIndex - 1)
    }
  }

以下是左右導航按鈕單擊事件處理函數(shù)的實現(xiàn)。我們根據(jù)是否包含指定的類名，來判斷單擊的哪個按鈕，進而執(zhí)行不同的導航函數(shù)。

/** @param {MouseEvent} e */
  function navClickHandler(e) {
    /** @type {{target: HTMLElement}} */
    const { target }=e
    if (target.classList.contains(CLS_NAME_NAV_RIGHT)) {
      toNext()
    } else if (target.classList.contains(CLS_NAME_NAV_LEFT)) {
      toPrev()
    }
  }

我們還需要監(jiān)聽banner列表的過渡開始和結(jié)束事件。過渡開始事件處理函數(shù)非常簡單，只是將過渡結(jié)束標志設為了false，代碼如下：

function slidesTransitionstartHandler(e) {
    transitionendFlag=false
  }

下面是過渡結(jié)束事件處理函數(shù)定義，其實也很簡單。

  function slidesTransitionendHandler(e) {
    transitionendFlag=true
    if (currentslideItemIndex >=indicatorItems.length) {
      // 取消過渡
      slides.classList.add(CLS_NAME_NO_TRANSITION)
      updateTranslateX(0)
      setTimeout(()=> {
        // 再添加回過渡
        slides.classList.remove(CLS_NAME_NO_TRANSITION)
      }, 0)
    }
  }

我們還需要讓輪播圖可以間隔一定時間自動切換。所以，我們需要實現(xiàn)開始和結(jié)束定時器的函數(shù)。這兩個函數(shù)非常簡單，代碼如下：

function startTimer() {
    timerId=setInterval(toNext, TIMER_DELAY)
  }

  function stopTimer() {
    clearInterval(timerId)
    timerId=null
  }

現(xiàn)在，是時候讓我們的輪播圖動起來了。我們首先調(diào)用更新banner列表函數(shù)，然后開始定時器，最后注冊事件監(jiān)聽器。

  updateSlides()
  startTimer()
  // 指針進入容器的時候停止定時器
  carouselWrapper.addEventListener('mouseenter', stopTimer)
  // 指針離開容器的時候開始定時器
  carouselWrapper.addEventListener('mouseleave', startTimer)
  nav.addEventListener('click', navClickHandler)
  indicator.addEventListener("click", indicatorClickHandler)
  slides.addEventListener('transitionstart', slidesTransitionstartHandler)
  slides.addEventListener('transitionend', slidesTransitionendHandler)

最終實現(xiàn)的效果圖如下：

童鞋們都學廢了嗎？是不是很簡單？感謝閱讀！

前面兩篇文章，學習了JavaScript中DOM、BOM相關基礎知識后，今天我們將結(jié)合前面所學內(nèi)容，利用DOM操作實現(xiàn)常見的網(wǎng)頁動畫效果；結(jié)合知識點有相關案例效果演示，另外本文所設計的源碼和配套素材可在文末獲取；

JavaScript網(wǎng)頁特效

學習目標

• offset的屬性與作用
• client的屬性與作用
• scroll的屬性與作用
• 封裝簡單動畫函數(shù)
• 網(wǎng)頁輪播圖

I、元素偏移量

獲得元素距離帶有定位父元素的位置

獲得元素自身的width和height

1.offset常用的屬性

2.offset與style的區(qū)別

案例：獲取鼠標在盒子內(nèi)的坐標

思路：盒子內(nèi)的坐標可以通過鼠標事件的e.pageX獲取到頁面坐標再減去element.offsetLeft來得到；

var box=document.querySelector('.box');
box.addEventListener('click',function(e){
    var x=e.pageX - this.offsetLeft;
    var y=e.pageY - this.offsetTop;
    console.log('x:'+x+',y:'+y);
})

案例：模態(tài)框拖拽

需求：

（1）點擊彈出層，會淡出模塊框，并且顯示灰色半透明的遮擋層；

（2）點擊關閉按鈕，可以關閉模態(tài)框，并且同時關閉灰色半透明遮擋層；

（3）鼠標放到模態(tài)框最上面一行，可以按住鼠標拖拽模態(tài)框在頁面中移動；

（4）鼠標松開，可以停止拖動模態(tài)框移動；

分析：

（1）拖拽事件，鼠標是按著的狀態(tài)，故mousemove和mouseup須卸載mousedown事件里面；

（2）在拖拽的過程中，鼠標的位置相對于組件的坐標是不變的，因此為了改變組件的位置，需要將頁面坐標減去相對組件坐標來獲取；

var link=document.querySelector('#link');
var login_window=document.querySelector('#login');
var close_button=document.querySelector('#closeBtn');
var bg=document.querySelector('#bg');
link.addEventListener('click',function(){
    login_window.style.display='block';
    bg.style.display='block';
})
close_button.addEventListener('click',function(){
    login_window.style.display='none';
    bg.style.display='none';
})
// 拖動事件三個過程：mousedown、mousemove、mouseup
var title=document.querySelector('#title');
title.addEventListener('mousedown',function(e){
    var x=e.pageX - login_window.offsetLeft;
    var y=e.pageY - login_window.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e){
        login_window.style.left=e.pageX - x + 'px';
        login_window.style.top=e.pageY -y + 'px';
    }
    document.addEventListener('mouseup',function (e) {
        document.removeEventListener('mousemove',move);
    });
});

案例:仿京東放大鏡效果

分析：

（1）mask界面與big界面可以通過鼠標事件設置dispaly屬性即可；mouseover顯示mask，mouseleave隱藏mask、mousemove移動mask

（2）mask的left與top的值可以通過鼠標在prew_img中的位置來獲取；

（3）為了讓mask界面中央跟著鼠標指針走，則需要減去mask尺寸一半的偏移量；

（4）防止mask頁面跑出prew_img，需要對偏移量進行判斷；

（5）大圖片移動距離怎么計算？mask移動距離/mask最大移動距離=大圖片移動距離/大圖片最大移動距離；所以大圖片移動距離=mask移動距離 * 大圖片移動最大距離 / 遮擋層最大移動距離；

window.addEventListener('load',function(){
    var prew_img=document.querySelector('.preview_img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');
    prew_img.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';
    })
    prew_img.addEventListener('mousemove',function(e){
        // 獲取鼠標在prew_img元素內(nèi)的坐標
        var x=e.pageX - this.offsetLeft;
        var y=e.pageY - this.offsetTop;
        // 防止mask頁面跑出prew_img盒子
        var maskX=x - mask.offsetWidth / 2;
        // 遮擋層的最大移動距離maskMax
        var maskMax=this.offsetWidth - mask.offsetWidth;
        if(maskX <=0){
            maskX=0;
        }else if(maskX >=maskMax){
            maskX=maskMax;
        }
        var maskY=y - mask.offsetHeight / 2;
        if(maskY <=0){
            maskY=0;
        }else if(maskY >=maskMax){
            maskY=maskMax;
        }
        // 讓mask界面中央跟著鼠標指針走
        mask.style.left=maskX + 'px';
        mask.style.top=maskY + 'px';
        // 讓big界面內(nèi)容跟著mask位置移動，
        // 大圖片移動距離=mask移動距離 * 大圖片移動最大距離 / mask最大移動距離
        var big_img=document.querySelector('.bigImg');
        var bigMax=big_img.offsetWidth - big.offsetWidth;
        // 大圖片移動距離
        var bigMoveX=maskX * bigMax / maskMax;
        var bigMoveY=maskY * bigMax / maskMax;
        big_img.style.left=-bigMoveX + 'px';
        big_img.style.top=-bigMoveY + 'px';
    });

    prew_img.addEventListener('mouseleave',function(){
        mask.style.display='none';
        big.style.display='none';
    });
});

II、元素的可視區(qū)

立即執(zhí)行函數(shù)

不需要調(diào)用，立馬能自己執(zhí)行的函數(shù);

// 寫法一：
(function(){})()
// 寫法二：
(function(){}())

立即執(zhí)行函數(shù)也可以傳遞參數(shù)：

(function(a,b){
console.log(a+b);
})(1,2)

立即執(zhí)行函數(shù)的作用是獨立創(chuàng)建了一個作用域，里面所有的變量都是局部變量，不會有命名沖突的情況；

III、元素滾動scroll

使用scroll系列相關屬性可以動態(tài)得到元素的大小、滾動距離；

scroll系列屬性 作用 備注 element.scrollTop 返回被卷去的上側(cè)距離 返回的數(shù)值不帶單位 element.scrollLeft 返回被卷去的左側(cè)距離 返回的數(shù)值不帶單位 element.scrollWidth 返回自身的實際寬度，不含邊框 返回的數(shù)值不帶單位 element.scrollHeight 返回自身的實際高度，不含邊框 返回的數(shù)值不帶單位

案例：仿淘寶固定側(cè)邊欄

• 1.原先側(cè)邊欄是絕對定位
• 2.當頁面滾動到一定的位置，側(cè)邊欄改為固定定位
• 3.頁面繼續(xù)滾動，會讓頂部顯示出來

頁面被卷去的頭部可以通過：window.pageYOffset來獲得

// 1.獲取元素
var sliderBar=document.querySelector('.slider-bar');
var topBar=document.querySelector('.header');
var banner=document.querySelector('.banner');
var main=document.querySelector('.main');
var goBack=document.querySelector('.goBack');

var barHeight=banner.offsetTop;
var sliderBarTop=sliderBar.offsetTop;
var fixTop=sliderBarTop - barHeight;
var mainTop=main.offsetTop;
// 2.頁面滾動事件
document.addEventListener('scroll',function(){

    if(window.pageYOffset >=barHeight){
        sliderBar.style.position='fixed';
        sliderBar.style.top=fixTop + 'px';
    }else{
        sliderBar.style.position='absolute';
        sliderBar.style.top=sliderBarTop + 'px';
    }
    if(window.pageYOffset >=mainTop){
        goBack.style.display='block';
    }else{
        goBack.style.display='none';
    }
})

IV、鼠標事件

當鼠標移動到元素上時就會觸發(fā)mouseenter事件，類似mouseenter

兩者的區(qū)別是：mouseover鼠標經(jīng)過自身盒子會觸發(fā)、經(jīng)過子盒子也會觸發(fā)；而mouseenter只有經(jīng)過自身盒子才會觸發(fā)；

原因是mouseenter不會冒泡；跟mouseenter搭配的通常是mouseleave

V、動畫函數(shù)

1.動畫實現(xiàn)的原理：

通過定時器setInterval()不斷移動盒子位置；

實現(xiàn)步驟：

• 獲得盒子當前位置
• 讓盒子在當前位置加上一個移動距離
• 加上一個結(jié)束定時器的條件
• 盒子需要添加定位，才能使用element.style.left

//利用setInterval設置一個box元素從左向右移動400像素的動畫
var box=document.querySelector('.box');
var timer=setInterval(function(){
    if(box.offsetLeft > 200){
        // 停止動畫，本質(zhì)上是清除定時器
        clearInterval(timer);
    }
    box.style.left=box.offsetLeft + 5 + 'px';
},50);

2.動畫函數(shù)的封裝

將動畫函數(shù)封裝起來，利用JS是動態(tài)語言的特性，通過設置對象的方式，給每個不同的元素指定不同的定時器；

// 簡單動畫函數(shù)的封裝,目標對象obj,目標位置target
function animate(obj,target){
    // 如果設置一個按鈕啟動動畫，會存在一個bug,只要不斷點擊按鈕，動畫會越走越快；
    // 原因是啟動了太多定時器，解決方案是，讓元素只有一個定時器執(zhí)行
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(obj.offsetLeft > target){
        // 停止動畫，本質(zhì)上是清除定時器
        clearInterval(obj.timer);
    }
    obj.style.left=obj.offsetLeft + 5 + 'px';
},50);
}
//利用setInterval設置動畫
var btn=document.querySelector('button');
var box1=document.querySelector('.box1');
btn.addEventListener('click',function(){
    animate(box1,400);
});

3.緩動動畫原理

緩動動畫就是讓元素運動速度有所變換，最常見的就是讓速度慢慢停下來；

思路：讓盒子每次移動的距離慢慢變小；

核心算法：每次移動的步長=(目標值-現(xiàn)在的位置)/10這里的10是份數(shù)可以是9也可以是8；

停止的條件是：當前盒子的位置等于目標位置就停止定時器；

// 緩動動畫
function animate(obj,target){
    // 清除定時器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運行定時器都要重新計算步長值，所以步長值寫在定時器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
        }
        // 緩動動畫核心算法：前進步長=（目標-當前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

動畫函數(shù)添加回調(diào)函數(shù)

回調(diào)函數(shù)原理：函數(shù)可以作為一個參數(shù)，將這個函數(shù)作為參數(shù)傳入到另一個函數(shù)里面，當這個函數(shù)執(zhí)行完成后，再執(zhí)行傳進去的這個函數(shù)，這個過程叫做回調(diào)。

回調(diào)函數(shù)位置：寫到定時器結(jié)束的位置

// 緩動動畫
function animate(obj,target,callback){
    // 清除定時器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運行定時器都要重新計算步長值，所以步長值寫在定時器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            if(callback){
                // 調(diào)用函數(shù)
                callback();
            }
        }
        // 緩動動畫核心算法：前進步長=（目標-當前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

將動畫函數(shù)封裝到單獨的JS文件

在head里引入JS文件

<script src="animate.js"></script>

實際調(diào)用過程中可以直接調(diào)用JS中定義的函數(shù)

var sliderbar=document.querySelector('.sliderbar');
var con=document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function () {
        // 動畫執(zhí)行完畢，將左箭頭轉(zhuǎn)為右箭頭
        sliderbar.children[1].innerHTML='→';
    });
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function () {
        sliderbar.children[1].innerHTML='←';
    });
})

案例：網(wǎng)頁輪播圖

功能需求：

• 鼠標經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；
• 鼠標點擊右側(cè)按鈕一次，圖片往左播放一張，以此內(nèi)推，左側(cè)按鈕同理；
• 圖標播放的同時，下面小圓圈模塊跟隨一起變化；
• 點擊小圓圈，可以播放相應圖片；
• 鼠標不經(jīng)過輪播圖，輪播圖也會自動播放圖片；
• 鼠標經(jīng)過，輪播圖模塊，自動播放停止

window.addEventListener('load', function () {
    //===0.定義變量，獲取元素
    var focus=document.querySelector('.focus');
    var arrowL=document.querySelector('.arrow-l');
    var arrowR=document.querySelector('.arrow-r');

    //===1.鼠標經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；=====focus.addEventListener('mouseenter', function () {
        arrowL.style.display='block';
        arrowR.style.display='block';
        clearInterval(timer);
        timer=null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display='none';
        arrowR.style.display='none';
        timer=window.setInterval(function () {
            arrowR.click();
        }, 3000);
    });
    //===2.根據(jù)輪播圖的數(shù)量自動生成小圓圈
    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    var pictureWidth=focus.offsetWidth;
    // 獲取到輪播圖圖片的數(shù)量length
    var length=ul.children.length;
    // 顯示當前圖片的索引
    var circle=0;
    // 顯示當前圖片的索引
    var num=0;
    // 創(chuàng)建元素插入到ol中
    for (var i=0; i < length; i++) {
        var li=document.createElement('li');
        // 給沒一個小圓圈添加一個index屬性，方便點擊事件的ul移動長度的確定
        li.setAttribute('index', i);
        // 給每一個小圓圈添加點擊事件
        li.addEventListener('click', function () {
            // 移除其他小圓圈的選中屬性
            for (var i=0; i < length; i++) {
                ol.children[i].className='';
            }
            // 設置當前選中小圓圈的選中屬性
            this.className='current';
            // 定義選中的小圓圈的索引
            var index=this.getAttribute('index');
            num=index;
            circle=index;
            animate(ul, -pictureWidth * index);
        });
        ol.appendChild(li);
    }
    ol.children[0].className='current';

    //===3.鼠標點擊右側(cè)按鈕一次，圖片往左播放一張，以此內(nèi)推，左側(cè)按鈕同理；==// 為了實現(xiàn)無縫滾動，需要將第一張圖添加到最后一張圖中
    var lastLi=ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 設置一個節(jié)流閥，防止按鈕在短時間內(nèi)點擊過多
    var flag=true;
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==ul.children.length - 1) {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul, -pictureWidth * num, function () {
                flag=true;
            });
            circle++;
            if (circle==ol.children.length) {
                circle=0;
            }
            activateCircle(circle);
        }
    });

    arrowL.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==0) {
                num=ul.children.length - 1;
                ul.style.left=-num * pictureWidth + 'px';
            }
            num--;
            animate(ul, -num * pictureWidth, function () {
                flag=true;
            });
            if (circle==0) {
                circle=ol.children.length;
            }
            circle--;
            activateCircle(circle);
        }
    });

    // 排他法思想點亮小圓圈
    function activateCircle(index) {
        for (var i=0; i < ol.children.length; i++) {
            ol.children[i].className='';
        }
        ol.children[index].className='current';
    }

    // 實現(xiàn)輪播圖自動播放
    var timer=window.setInterval(function () {
        arrowR.click();
    }, 3000);
});

顯示效果：

輪播圖自動播放的原理是：設置一個定時器使用click（）函數(shù)模擬按鈕點擊事件；

輪播圖實現(xiàn)無縫滾動的原理是：將第一個圖動態(tài)加在最后一張圖上，當切到最后一張圖時，重新設置元素布局距離，再執(zhí)行滑動動畫。

防止同一個按鈕在短時間內(nèi)點擊次數(shù)過多，可以設置一個節(jié)流閥，將啟動節(jié)流閥的操作寫在動畫回調(diào)函數(shù)里，這樣只有當動畫執(zhí)行完畢后才才可以重新恢復按鈕的點擊功能；

頁面滾動動畫可以使用函數(shù)：window.scroll(x,y)可以滾動至頁面的指定坐標位置；

最后：

本文配套源碼與素材獲取：https://gitee.com/yushengtan/jscode

關于JavaScript在網(wǎng)頁動畫中的使用就介紹到這里，下一節(jié)我們將繼續(xù)深入介紹JavaScript的異步調(diào)用相關知識的學習~