github請點這里
一、簡介:輪播動畫是日常常見的前端動畫之一,有許多優(yōu)秀的輪播庫,比如:swiper,基于css3實現(xiàn)的Animate.css,以及bootstrap等,這些動畫庫提供了種類繁多的動畫形式,在實際的項目開發(fā)中為了做個別動畫而引入,顯得多余,為此,本人實現(xiàn)了一個輪播動畫函數(shù)(類).
二、主要功能:
? pc端:
? 1.自動播放
? 2.左右切換
? 3.支持鼠標移入移出動畫暫停和播放
? 移動端:
? 1.自動播放
? 2.自由滑動
三、實現(xiàn)過程
閱讀前考慮兩個問題:
1.當(dāng)前圖片是第一張,用戶仍然向右滑動怎么辦?
2.當(dāng)前圖片是最后一張,用戶向左滑動圖片怎么辦?
? 1.自動播放
? ·考慮到動畫的流暢性,播放速度為1000ms/60(取16毫秒切換完成一張圖片)
? ·每張圖片自動播放完后等待3秒播放下一張,時間可自由配置
? ·通過css3動畫屬性實現(xiàn)圖片切換
var timer = setInterval(function() {
that.bar.style.transitionDuration='.3s'//css3動畫
that.left=-that.index*that.w
setLeft(that.bar,that.left)
that.index=that.index+1
},3000)
? 考慮到上面的兩個問題,在初始化輪播動畫時,復(fù)制該組圖片(為區(qū)別,初始的輪播圖片視為第一組,復(fù)制的視為第二組),在每次css3動畫完成時,監(jiān)聽其完成事件,判斷如果播放計數(shù)已經(jīng)超過初始的輪播長度,重置當(dāng)前的播放計數(shù),并且瞬間移動輪播條到第一組圖片的相應(yīng)位置
that.ele.addEventListener('transitionend',function() {
that.stop()
that.bar.style.transitionDuration=' '
if (that.index>that.len) {
that.index=that.index%that.len?that.index%that.len:1
that.left=-(that.index-1)*that.w
setLeft(that.bar,that.left)
}
that.showNav()
that.move(that)
})
? 2.左右切換
? 給輪播動畫的可視區(qū)域添加向左切換和向右切換的按鈕,用戶點擊向左按鈕,可視區(qū)域切換成當(dāng)前圖片的前一張圖片,點擊向右切換按鈕,可視區(qū)域切換成當(dāng)前圖片的后一張圖片,可以選擇切換時有動畫效果或者瞬間移動.以下采用瞬間移動
functionprevPic(that) {
if (that.index===1) {
that.index=that.len*2
that.left=-that.w*(that.len*2-1)
setLeft(that.bar,that.left)
} else {
that.left=-that.w*(that.index-2)
setLeft(that.bar,that.left)
that.index=that.index-1
}
}
functionnextPic(that) {
if (that.index===that.len*2) {
that.index=1
that.left=0
setLeft(that.bar,that.left)
} else {
that.left=-that.w*that.index
setLeft(that.bar,that.left)
that.index=that.index+1
}
}
? 3.鼠標移入移出
? ]添加鼠標移入移出事件
that.ele.addEventListener('mouseover',function(ev) {
that.stop()
if (ev.target.className==='navigation_index') {
var e=ev.target
showPic(e.dataset.index)
that.index=+e.dataset.index
that.showNav()
}
return
})
that.ele.addEventListener('mouseout',function(ev) {
if (ev.target.className==='navigation_index') {
that.showNav()
that.move(that)
}
return
})
? 移動端區(qū)別于pc端在以下幾點:
? 1.移動端有touch事件,pc端沒有,此時應(yīng)該注意touch事件和click事件沖突的處理;
? 2.移動端有靈敏的touch事件,因此把左右切換按鈕隱藏,用戶通過touch事件移動圖片同樣能左右切換圖片,自由滑動
that.ele.ontouchstart = function(ev) {
that.bar.style.transitionDuration=''
that.stop()
ev.preventDefault()
startPoint=ev.changedTouches[0].pageX//獲得手指觸摸屏幕的坐標
startEle=that.bar.offsetLeft//保存當(dāng)前輪播條的位置
}
that.ele.ontouchmove=function(ev) {
curPoint=ev.changedTouches[0].pageX
distance=curPoint-startPoint;
if (that.index===1&&distance>0) {
that.left = -that.w*that.len+distance
that.bar.style.left=that.left+'px'
} else {
that.left=startEle+distance
that.bar.style.left=that.left+'px'
}
}
that.ele.ontouchend = function (ev) {
for (var i = 0; i < touchTimer.length; i++) {
clearTimer(touchTimer[i], 2);
}
that.bar.style.transitionDuration = '.3s';
if (Math.abs(distance) >= that.w / 3) {
if (distance > 0) {
if (that.index === 1) {
that.index = that.len + 1;
}
prevPic(that);
that.showNav();
} else {
if (that.index === that.len * 2) {
that.index = that.len;
}
nextPic(that);
that.showNav();
}
} else {
if (that.index === 1 && distance > 0) {
that.index = that.len + 1;
}
if (that.index === that.len * 2 && distance < 0) {
that.index = that.len;
}
showPic(that.index);
//如果distance===0,無法觸發(fā)transitionend事件,通過移動一點點距離來觸發(fā)
if (Math.abs(distance) === 0) {
that.bar.style.left = that.bar.offsetLeft - 0.1 + 'px';
}
}
distance = 0;
};
總結(jié):仔細看上面的代碼,會發(fā)現(xiàn),每個事件在觸發(fā)前都把當(dāng)前所有的定時器清除掉,這是為了避免在特定事件發(fā)生的時候,定時器動畫產(chǎn)生干擾而導(dǎo)致體驗不佳,定時器在動畫中是一個非常重要的使用,詳細了解,請參考我的下一篇文章.
