关于移动端无缝滚动轮播图的总结

**

核心代码

window.addEventListener(‘load’,function(){
//插件防止点击延迟
if (‘addEventListener’ in document) {
document.addEventListener(‘DOMContentLoaded’, function() {
FastClick.attach(document.body);
}, false);
}

// 获取元素
var focus=document.querySelector('.focus');
var ul=focus.children[0];
//获取ol
var ol=focus.children[1]
//获取focus宽度
var w=focus.offsetWidth;
//利用定时器自动轮播图图片
var index=0;
var flag=false;
//定时自动滑动图片
var timer=setInterval(function(){
    index++;
    var translatex = -index * w;
    ul.style.transition='all .2s';
    ul.style.transform='translateX(' + translatex +'px)';
},3000)


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)';
    }

    // 小圆点跟随变化
    ol.querySelector('.current').classList.remove('current')
    //当前的索引号的小li 加上current
    ol.children[index].classList.add('current')
})

// 手指滑动轮播图
//触摸元素touchstart获取起始的坐标
var  startX=0;
var moveX=0;
ul.addEventListener('touchstart',function(e){
    startX=e.targetTouches[0].pageX;
    //清除定时器
    clearInterval(timer)
})
//移动手指 touchmove 
ul.addEventListener('touchmove',function(e){
    // 计算移动距离
    moveX=e.targetTouches[0].pageX-startX;
    //移动盒子  盒子原来的位置+手指移动的距离
       // 利用最新的索引号乘以宽度去滚动图片
       var translatex=-index * w+moveX
       ul.style.transition='none'
       ul.style.transform='translateX(' + translatex +'px)';
       flag=true;
       e.preventDefault()
})

//手指离开 根据移动距离去判断是回弹还是播放上一张下一张
ul.addEventListener('touchend',function(e){
    if(flag)
    {
if(Math.abs(moveX)>50)
{
    //如果右滑则是上一张,moveX是正值
    if(moveX>0)
    {
        index--;
     
    }else{
        index++;
    }
    var translatex=-index * w
    ul.style.transition='all .3s'
    ul.style.transform='translateX(' + translatex +'px)';
}else{
    
    var translatex=-index * w
    ul.style.transition='all .2s'
    ul.style.transform='translateX(' + translatex +'px)';
}
//先清除定时器,再启用定时器
clearInterval(timer)
timer=setInterval(function(){
    index++;
    var translatex = -index * w;
    ul.style.transition='all .2s';
    ul.style.transform='translateX(' + translatex +'px)';
},3000)

}
});

// 返回顶部模块制作
var goBack=document.querySelector('.goBack');
var nav=document.querySelector('nav');
//窗口滚动
window.addEventListener('scroll',function(){
if(window.pageYOffset>=nav.offsetTop)
{
    goBack.style.display="block"
}else{
    goBack.style.display="none"
}

goBack.addEventListener(‘click’,function(){
window.scroll(0,0)
})
})
})

其它功能正常,出现了一个小小的bug

第一张图往左拉的时候空白问题。。。。。。。