一匪凡、輪播圖
1.傳統(tǒng)輪播圖:
運(yùn)動(dòng)的封裝:
(1)定時(shí)器的使用咖刃,創(chuàng)建定時(shí)器setInterval();每隔指定的時(shí)間執(zhí)行代碼儒士。
取消計(jì)時(shí)器 clearInterval(函數(shù))方法可取消由 setInterval() 設(shè)置的交互時(shí)間苟翻。所以我們就可以創(chuàng)建一個(gè)簡(jiǎn)單的動(dòng)畫(huà)輪播圖:
<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>
要是想終止運(yùn)動(dòng)搭伤,直接在定時(shí)器內(nèi)部,判斷到達(dá)目標(biāo)值袜瞬,進(jìn)行清除定時(shí)器就可以!
2.運(yùn)動(dòng)封裝函數(shù)的調(diào)用:
封裝運(yùn)動(dòng)函數(shù)就要寫(xiě)1個(gè)函數(shù)的使用說(shuō)明身堡,告訴我們調(diào)用者邓尤,該如何怎么函數(shù)
需要3個(gè)參數(shù):
- 參數(shù)1 obj 對(duì)象 代表需要移動(dòng)的物體
- 參數(shù)2 target 數(shù)字 代表物體移動(dòng)的終止位置
- 參數(shù)3 cb 函數(shù) 物體運(yùn)動(dòng)完成之后,自動(dòng)調(diào)用 cb
(1)封裝函數(shù)的多個(gè)屬性情況:
a.得到物體當(dāng)前樣式值
// opacity --> 可能是 left、width汞扎、 height ==> 用1個(gè)函數(shù)參數(shù)來(lái)替代
var current = parseFloat(obj.style[attr]);
console.log(current)
if (attr == "opacity") {
// 透明度 統(tǒng)一成 100 進(jìn)制
current *= 100
b. 判斷當(dāng)前樣式值是否等于目標(biāo)值
c.速度變化
d.更改樣式值
(2)對(duì)象中屬性的訪問(wèn)方式 :
var stu = {}
stu.name = "Jack"
//console.log(stu.name)
var k = "name"
// stu[k] 代表是 訪問(wèn) stu對(duì)象中 變量k所代表的 屬性
// stu name 屬性 ==> Jack
// stu["name"] 代表是 訪問(wèn) stu 對(duì)象中 name 屬性
// stu[name] 代表是 訪問(wèn) stu 對(duì)象中 變量name所代表的 屬性
console.log( stu[k] )
// stu[height] 代表 訪問(wèn) stu對(duì)象中 變量height 所代表的 屬性
// stu["height"] 代表 訪問(wèn) stu對(duì)象中 height 屬性
// stu.height 代表 訪問(wèn) stu對(duì)象中 height 屬性
3.新動(dòng)畫(huà)算法:
A(緩沖運(yùn)動(dòng)):
(1) 獲取div的Id
(2)幀編號(hào)季稳,從1開(kāi)始
(3)創(chuàng)建定時(shí)器
(4)計(jì)算當(dāng)前幀的位置: 通過(guò)緩沖計(jì)算函數(shù)來(lái)進(jìn)行計(jì)算: 幀編號(hào)、起始位置澈魄、變化量 景鼠、 總幀數(shù)
(5)到目標(biāo)幀了,終止計(jì)時(shí)器痹扇。指向下一幀
【注意】調(diào)用動(dòng)畫(huà)函數(shù)的間隔時(shí)間铛漓,要遠(yuǎn)大于動(dòng)畫(huà)運(yùn)行時(shí)間。