音悦Tai项目三部曲之(二）------------关于循环轮播图的想法

原本计划10月底写完的三部曲因为最近的vue框架的学习以及新项目作品的开发迟迟没有去写。今晚在搞定了旅游网的Home page的开发后，闲着无聊再来看看我们的音悦台项目的总结。
就简单的说说实现的思路吧，因为实在没有太多的精力去引入图片详细的去说明了。
首先我们这个是实现的一个循环轮播，就是滑到最后一张图片的时候无缝间隙的跳到第一张图片。
这里假如我们要写一个四张图片的轮播图
1.首先我们要准备五张图片的长度位置最后一张是第一张的图片
2.当我们滑动到第四张图片也就是轮播图意义上的最后一张图片（实际是整个图片块的倒数第二张），我们再滑动的时候就是最后一张图片，但在用户的体验感觉里确实从最后一张图片滑到了第一张图片。
3.到了这一步我们就要设置跳转了，设置transform的过渡时间为0，我们再将图片的位置移到一开始的地方，然后调用自动播放函数。

到这就实现了图片循环的完美连接了
下面是实现代码

//轮播图
function banner() {
    //滑动变量定义
    var flag=false;
    var elementX=0;
    var initX=0;
    var nowX=0;
    var distance=0;
    var finalX=0;//FINAL=ELEMENTX+NOWX-INITX
    var cnt=0;
    //基本变量定义
    var banner=document.querySelector('#wrap .content #banner');
    var bannerlist=document.querySelector('#wrap .content #banner .bannerList');
    var device_width=document.documentElement.clientWidth;
    var banner_icon=document.querySelectorAll('#wrap .content #banner .banner_icon span');
    //自动轮播参数传几就从第(i-1)个开始播放
    function change_icon(num,i) {
            for(var j=0;j<num;j++){
                banner_icon[j].className='';
            }
            if(i==5){
                i=0
            }
            banner_icon[i].className='select';
    }
    function auto_play(i) {
        var index;
        var translateX=0;
        if(typeof i=='number'){
            index=i;
            translateX=device_width*index;
            change_icon(banner_icon.length,index);
            move(bannerlist,'x',-translateX);
        }else{
            index=0;
        }
        bannerlist.time=setInterval(function (event) {
            translateX=device_width*index;
            bannerlist.style.transition='.5s';
            move(bannerlist,'x',-translateX);
            change_icon(banner_icon.length,index);
            index++;
            if(index==6){
                setTimeout(function () {
                    bannerlist.style.transition='';
                    move(bannerlist,'x',0);
                    index=0;
                },400);
            }
        },1200);
    };
   auto_play();
    //触摸切换图片
    bannerlist.addEventListener('touchstart',function(event) {
        clearInterval(bannerlist.time);
        var touch=event.changedTouches[0];
        initX=touch.clientX;
        elementX=move(this,'x');
    })
    bannerlist.addEventListener('touchmove',function(event) {
        var touches=event.changedTouches[0];
        nowX=touches.clientX;
        distance=nowX-initX;
        if(distance>0){
            //右滑
            if(elementX+distance>device_width/4){
                //左临界状态
                this.style.transition='';
                move(this,'x',-device_width*5);
                setTimeout(function () {
                   bannerlist.style.transition='.3s';
                    move(bannerlist,'x',-device_width*4);
                    change_icon(banner_icon.length,4);
                    bannerlist.start=4;
                },10)

            }else{
                if(distance>device_width/4){
                    finalX=elementX+device_width;
                    this.style.transition='.3s';
                    move(this,'x',finalX);
                    var xb=Math.abs(move(bannerlist,'x')/device_width);
                    change_icon(banner_icon.length,xb);
                    bannerlist.start=xb;
                }
            }

        }else{
            //左滑
            if(elementX+distance<-device_width*5-device_width/4){
                //右临界状态
                this.style.transition='';
                move(this,'x',0);
                setTimeout(function () {
                    bannerlist.style.transition='.3s';
                    move(bannerlist,'x',-device_width);
                    change_icon(banner_icon.length,1);
                    bannerlist.start=1;
                },10)
            }else{
                if(distance<-device_width/4){
                    finalX=elementX-device_width;
                    this.style.transition='.3s';
                    move(this,'x',finalX);
                   var xb=Math.abs(move(bannerlist,'x')/device_width);
                    change_icon(banner_icon.length,xb);
                    bannerlist.start=xb;
                }
            }

        }

    })
    bannerlist.addEventListener('touchend',function(event) {
            auto_play(bannerlist.start)
    })
}