無縫輪播的原理圖
1 . html的架構 :
| <div class="layout"> <div class="jd_banner"> <ul class="clearfix"> <li><a href="#"><img src="images/l1.jpg"></a></li> <li><a href="#"><img src="images/l2.jpg"></a></li> <li><a href="#"><img src="images/l3.jpg"></a></li> <li><a href="#"><img src="images/l4.jpg"></a></li> <li><a href="#"><img src="images/l5.jpg"></a></li> <li><a href="#"><img src="images/l6.jpg"></a></li> <li><a href="#"><img src="images/l7.jpg"></a></li> <li><a href="#"><img src="images/l8.jpg"></a></li> <li><a href="#"><img src="images/l1.jpg"></a></li> </ul> </div></div> |
JavaScript:
| /*輪播圖*/function banner() { var banner = document.querySelector('.banner'); /*獲取設備寬度*/ var offsetWidth = banner.offsetWidth; /*圖片容器*/ var imageBox = banner.querySelector('ul:first-child'); /*給圖片容器添加過渡動畫屬性*/ function addTransition() { imageBox.style.transition = 'all 0.5s'; imageBox.style.webkitTransition = 'all 0.5s'; } /*清除圖片容器添加過渡動畫屬性*/ function removeTransition() { imageBox.style.transition = 'none'; imageBox.style.webkitTransition = 'none'; } /*設置X軸定位*/ function setTranslateX(offsetX) { imageBox.style.transform = 'translateX(' + offsetX + 'px)'; imageBox.style.webkitTransform = 'translateX(' + offsetX + 'px)'; } // 定義當前索引 var index = 1; // 自動輪播 var timer = setInterval(function () { index++; addTransition(); setTranslateX(-index * offsetWidth); //同步設置css //底層異步操作 }, 2000); transVar.transitionEnd(imageBox, function () { //監(jiān)聽每一次動畫的結束 if (index >= 9) { // 當輪播到第9張的時候,無縫切換到第1張圖片 index = 1; // 清除過渡 removeTransition(); //無動畫效果的定位到第一張圖片 setTranslateX(-index * offsetWidth); } }); } |
JavaScript : 監(jiān)聽動畫結束事件
| window.transVar = {}; //定義一個window的全局對象//監(jiān)聽css3過渡動畫的結束事件transVar.transitionEnd = function(obj,callback){ if (typeof obj == 'object'){ obj.addEventListener('webkitTransitionEnd',function(){ // 兼容寫法 callback && callback(); // && 運算符 , 如果callback函數(shù)存在,則調用callback()函數(shù) }) obj.addEventListener('transitionEnd',function(){ callback && callback(); }) }} |
