window.addEventListener('load',function(){
    var focus = this.document.querySelector('.focus');
    var ul = focus.children[0]; //即获取focus里面的整个ul,如果是[1]就获取整个ol
    var w = focus.offsetWidth; //获取focus的宽度

    var ol = focus.children[1];//获取整个ol,即focus的第二个子元素ol

    // 利用定时器自动轮播图片
    var index = 0; //从0开始,在下面的循环中不断自加
    var timer = setInterval(function(){
        index++;
        var translatex = -index * w; //每次移动的距离就是索引号乘以宽度,注意左移是负值
        ul.style.transition = 'all .5s'; //给图片移动添加一个过渡效果,值越大越慢,值0~1
        ul.style.transform = 'translateX(' + translatex + 'px)'; //每隔2秒自动移动一张图片
    },2000);

    // 监听过渡完成事件transitionend，即某个元素事件过渡完之后才执行这里的function
    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){ //当用户左滑查看复制后的第一张图片时,即索引小于0时
            index = 2; //就跳到索引号为2的图片上,即复制后的第三张图片上
            // 复制后的第一张图片是隐藏的,即不带索引号,或者理解为索引号为负,复制后的第二张图片开始,索引号从0增加到3

            // 当用户进入页面右滑到复制后的第一张时,即此时索引号小于0,就开始执行下面代码的移动
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 小圆点跟随变化
        //把ol里面带有current类名的小li获取过来,并且移除掉这些current类名
        ol.querySelector('li.current').classList.remove('current');
        ol.children[index].classList.add('current'); //把当前的小li加上current类名
    })

    // 手指滑动轮播图效果
    var startX = 0; //只需要左右移动,不需要上下移动,所以不需要获取y值
    var moveX = 0; //移动距离也是要声明一个全局变量,后面代码的播放上一张或播放下一张会使用到
    var flag = false;
    ul.addEventListener('touchstart',function(e){ //获取手指坐标要使用到事件对象
        startX = e.targetTouches[0].pageX; //第一个手指的坐标(初始的)
        clearInterval(timer); //当手指拖动或者触摸时,就不需要定时器了
    })
    ul.addEventListener('touchmove',function(e){ //计算需要移动的距离要使用到事件对象
        moveX = e.targetTouches[0].pageX - startX; //手指移动的距离，当第一个手指的时候
        // 盒子最终的位置=盒子原来的位置+手指移动的距离
        var tsx = -index * w + moveX;
        // 不需要做动画效果,所以要取消过渡动画
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + tsx + 'px)'; //移动盒子
        flag = true; //优化一下写法
        e.preventDefault(); //优化写法,阻止滚动屏幕的默认行为。只需要移动图片,不需要滚动屏幕
    })
    ul.addEventListener('touchend',function(e){ //触摸离开事件
        if(flag){ //如果flag为true,即如果执行过上面的移动,就执行下面的代码。不写默认的要求就是true
            if(Math.abs(moveX) > 50){//如果手指移动距离大于50像素,往左滑值是正的,往右滑是负数。所以用到Math.abs()取绝对值
                // 如果moveX是正值,则说明是右滑,就播放上一张
                if(moveX > 0){
                    index--; //播放上一张
                } else{ //否则就判定为左滑,即播放下一张
                    index++;
                }
                var ttsx = -index * w;
                ul.style.transition = 'all .3s'; //过渡效果
                ul.style.transform = 'translateX(' + ttsx + 'px)'; //移动盒子  
            } else{
                // 如果移动距离小于设置值,就回弹原来的位置
                // 过渡看自己要不要,这里没有加
                var ttsx = -index * w;
                ul.style.transform = 'translateX(' + ttsx + 'px)'; //移动盒子
            }
        }
        // 当手指离开就重新开启定时器
        clearInterval(timer); //开之前先清除定时器,确保当前元素只有一个定时器
        timer = setInterval(function(){ //开启定时器
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .5s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        },2000);

    })
})