一、輪播圖
1.傳統(tǒng)輪播圖：
運動的封裝：
（1）定時器的使用，創(chuàng)建定時器setInterval()；每隔指定的時間執(zhí)行代碼。
取消計時器 clearInterval(函數(shù))方法可取消由 setInterval() 設置的交互時間。所以我們就可以創(chuàng)建一個簡單的動畫輪播圖：
<body>
<script>
window.onload=init;
var i=1;
function init(){
window.setInterval("fun()",1000)
}
function fun(){
i++;
if (i>5)
{
i=1;
}
var oImage=document.getElementById("d1");
oImage.src="傳統(tǒng)輪播/img/"+i+".jpg"
}
</script>
要是想終止運動，直接在定時器內部，判斷到達目標值，進行清除定時器就可以！
2.運動封裝函數(shù)的調用：
封裝運動函數(shù)就要寫1個函數(shù)的使用說明，告訴我們調用者，該如何怎么函數(shù)
需要3個參數(shù)：
- 參數(shù)1 obj 對象 代表需要移動的物體
- 參數(shù)2 target 數(shù)字 代表物體移動的終止位置
- 參數(shù)3 cb 函數(shù) 物體運動完成之后，自動調用 cb
（1）封裝函數(shù)的多個屬性情況：
a.得到物體當前樣式值
// opacity --> 可能是 left、width、 height ==> 用1個函數(shù)參數(shù)來替代
var current = parseFloat(obj.style[attr]);
console.log(current)
if (attr == "opacity") {
// 透明度 統(tǒng)一成 100 進制
current *= 100
b. 判斷當前樣式值是否等于目標值
c.速度變化
d.更改樣式值
（2）對象中屬性的訪問方式 ：
var stu = {}
stu.name = "Jack"
//console.log(stu.name)
var k = "name"
// stu[k] 代表是 訪問 stu對象中 變量k所代表的 屬性
// stu name 屬性 ==> Jack
// stu["name"] 代表是 訪問 stu 對象中 name 屬性
// stu[name] 代表是 訪問 stu 對象中 變量name所代表的 屬性
console.log( stu[k] )
// stu[height] 代表 訪問 stu對象中 變量height 所代表的 屬性
// stu["height"] 代表 訪問 stu對象中 height 屬性
// stu.height 代表 訪問 stu對象中 height 屬性
3.新動畫算法：
A（緩沖運動）：
(1) 獲取div的Id
(2)幀編號，從1開始
(3)創(chuàng)建定時器
(4)計算當前幀的位置: 通過緩沖計算函數(shù)來進行計算: 幀編號、起始位置、變化量 、 總幀數(shù)
（5）到目標幀了，終止計時器。指向下一幀
【注意】調用動畫函數(shù)的間隔時間，要遠大于動畫運行時間。
