touchjs轮播图

• 
• 
• 

<script src="js/touch.js"></script>
<script>
    // 最外层的盒子
    var wrap = document.getElementsByClassName('wrap')[0]
    var ospan = document.getElementsByTagName('span')
    // 获取元素
    var oul = document.getElementsByClassName("list")[0]
    // 获取一张图片的宽度 
    var imgW = document.documentElement.clientWidth;
    console.log(imgW);

    // 复制一份ul的所有子元素  做无缝轮播
    oul.innerHTML += oul.innerHTML
    // 获取li的个数包括复制的
    var len = oul.getElementsByTagName('li').length 
    console.log(len);
    // 设置ul的宽度
    oul.style.width = len * imgW + 'px'

    // console.log(len-1);


    var count = 0;//当前图片的下标
    var listLeft = 0;//当前ul的left值


    // 拖动开始
    // 1、取得list的left值，给count赋值
    // 2、判断当前按下的是第几张图，如果第一张图，拉到下标为3的这张图。如果为最后一张，拉到下标为2的这张图
    touch.on(oul, 'dragstart', function (ev) {
        oul.style.transition = 'none'; // 按下时，清除运动  只有拖动时才开启运动
        console.log(ev);
        listLeft = oul.offsetLeft //取oul的left值

        count = Math.abs(listLeft / imgW); // 返回的是0或者一个负数，abs取绝对值

        if (count == 0) { //如果第一张图，拉到下标为3的这张图
            count = ospan.length;
            // console.log(count);
            oul.style.left = -count * imgW + 'px';
            listLeft = oul.offsetLeft;
        }

        if (count == len - 1) {//如果为最后一张，瞬间回到第二张图
               // 在最后一张图按下
            count = ospan.length-1;
            console.log(count,'1111');
            oul.style.left = -count * imgW + 'px';
            listLeft = oul.offsetLeft;
        }
        console.log(count);
        // console.log(count);
    })

    // 拖动中
    touch.on(oul, 'drag', function (ev) {
        oul.style.left = ev.distanceX + listLeft + 'px';
    });

    // 拖动结束
    touch.on(oul, 'dragend', function (ev) {
        // 如果拖动的距离大于屏幕宽度的5分之一 或者 拖动的时间小于200ms 则到下一张
        // console.log(ev.distanceX); // 拖动的距离  ms
        // console.log(ev.duration); // 时间
        // console.log(ev.direction); // 方向
        if ((Math.abs(ev.distanceX) > imgW / 5) || ev.duration < 200) {
            // 方向如果是左 就cont++ 方向如果是右就cont--
            if (ev.direction === 'left') {
                count++;
                console.log(count);
            } else if (ev.direction === 'right') {
                count--;
            }
        }
        // 动画的时间
        oul.style.transition = 'all 0.4s';
        // 动画移动的位置
        oul.style.left = -count * imgW + 'px';

        for (var i = 0; i < ospan.length; i++) {
            ospan[i].className = '';
        }
        // count  对小圆点个数取余
        ospan[count % ospan.length].className = 'active';
    });

</script>