//得到carousel
var carousel = document.getElementById("carousel");
//得到li
var lis = document.getElementById("imageslist").getElementsByTagName("li");
//得到按鈕
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
//得到小圓點(diǎn)
var circlesLi = document.getElementById("circles").getElementsByTagName("li");
//圖片數(shù)量
var imgLength = lis.length;
//圖片寬度
var width = 560;
//滾動(dòng)速度
var animatetime = 300;
//緩沖描述
var tween = "Linear";
//間隔時(shí)間
var interval = 2000;
animate函數(shù)是動(dòng)畫封裝函數(shù)
@para0 elem參數(shù)就是運(yùn)動(dòng)的對(duì)象
@para1 targetJSON參數(shù)就是運(yùn)動(dòng)的終點(diǎn)狀態(tài)福扬,可以寫px遮斥,也可以不寫px
{
"left": 500,
"top": 600
}
@para2 time是運(yùn)動(dòng)總時(shí)間层亿,毫秒為單位
@para3 tweenString緩沖描述詞,比如"Linear",可選
@para4 callback是回調(diào)函數(shù)绊谭,可選
return 本函數(shù)沒有返回值
*/
function animate(elem , targetJSON , time , tweenString , callback)
//左按鈕的監(jiān)聽
leftBtn.onclick = function(){
// 一點(diǎn)擊就會(huì)執(zhí)行此函數(shù)。 如果我點(diǎn)擊非惩粲担快达传,
// 比如0.5秒一次, 那么函數(shù)將會(huì) 每個(gè)0.5秒執(zhí)行1次
// 為了解決動(dòng)畫沒有完成,就執(zhí)行下一次的問題迫筑,必須做點(diǎn)事情
// 標(biāo)記 當(dāng)前是否是在動(dòng)畫過程中
// 對(duì)象.isanimated 標(biāo)記: 如果為true宪赶,說明它正在執(zhí)行動(dòng)畫
// 對(duì)象.xxx undefined 假的
//函數(shù)截流
if(lis[idx].isanimated) return;
//原來的信號(hào)量的圖片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信號(hào)量改變
idx--;
if(idx < 0){
idx = imgLength - 1;
}
//新信號(hào)量的圖片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();
}
//批量添加小圓點(diǎn)的監(jiān)聽
for(var i = 0 ; i <= imgLength - 1 ; i++){
circlesLi[i].index = i; //先編號(hào)
circlesLi[i].onclick = function(){
//截流
if(lis[idx].isanimated) return;
//原來的信號(hào)量的圖片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信號(hào)量改變
idx = this.index;
//新信號(hào)量的圖片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();
}
}
//更換小圓點(diǎn)函數(shù)
function changeCircle(){
//去掉所有小圓點(diǎn)的cur
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";
}
//第信號(hào)量這個(gè)小圓點(diǎn)加cur
circlesLi[idx].className = "cur";
}
apply()的作用
var a = {"name": "Jack"}
// apply 可以傳遞參數(shù),讓函數(shù)中的this變成傳入的參數(shù)
// c.apply(a);
//c擁有與a一樣的屬性脯燃。
// 3. 與apply非常相似
c.call(oBox);
最后編輯于 :2017.12.11 02:17:49
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者