案例:
//过渡完成后 再去判断 监听过渡完成的事件
ul.addEventListener('transitionend', function() {
//无缝滚动
if (index >= 3) {
index = 0;
ul.style.transition = 'none';
var translateX = -index * w;
ul.style.transform = 'translateX(' + translateX + 'px)';
} else if (index < 0) {
index = 2;
ul.style.transition = 'none';
var translateX = -index * w;
ul.style.transform = 'translateX(' + translateX + 'px)';
}
var ol = document.querySelector('ol');
//小圆点跟随变化
//把ol里面的li带有current类名的选出来取出 current类
ol.querySelector('.current').classList.remove('current');
//当前索引号添加current类
ol.children[index].classList.add('current');
})
注:
利用transition做过渡效果,translate来移动元素盒子,就不需要对盒子进行定位