console 命令行工具 X clear

console

window.addEventListener('load', function () {
    // alert('Load access!');
    //获取元素
    var focus = document.querySelector('.focus');
    console.log(focus);
    var ul = focus.children[0];
    console.log(ul);
    //获取元素宽度
    var w = focus.offsetWidth;
    console.log(w);
    var ol = focus.children[1];
    console.log(ol);
    //轮播
    var index = 0;
    //定时器
    var timer = setInterval(function () {
        index++;
        //算法：（左方向）- 索引号*banner宽度
        var translatex = -index * w;
        //添加过渡效果
        ul.style.transition = 'all .3s';
        //沿着x轴移动
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    ul.addEventListener('transitionend', function () {
        console.log(index);
        //如果到了第三个那就回到第0张，也就是li——1
        if (index >= 3) {
            index = 0;
            //取消过渡
            ul.style.transition = 'none';
            //算法：（左方向）- 索引号*banner宽度
            var translatex = -index * w;
            //沿着x轴移动
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            //如果到了第0个那就回到第2张，也就是li——3
            console.log(index + '213214');
            index = 2;
            //取消过渡
            ul.style.transition = 'none';
            //算法：（左方向）- 索引号*banner宽度
            var translatex = -index * w;
            //沿着x轴移动
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        //去除li的current类名
        ol.querySelector('.current').classList.remove('current');
        //加上current类名到当前索引号的li
        ol.children[index].classList.add('current');
    })
    var startX = 0;
    var moveX = 0;
    flag = false;//是否执行回弹效果
    //监听banner触摸事件
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        //打印第一个手指在banner的x距离
        console.log(startX);
        //手指触摸就停止定时器
        clearInterval(timer);
    });
    //监听banner触摸后的移动事件
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX;
        //打印第一个手指再banner的移动距离
        console.log(moveX);
        //新位置=原来的位置+手指触摸后移动的距离
        var translatex = -index * w + moveX;
        ul.style.transform = 'translateX(' + translatex + 'px)';
        //取消过渡效果
        ul.style.transition = 'none';
        //移动才会执行回弹效果
        flag = true;
    })
    //监听banner触摸结束事件
    ul.addEventListener('touchend', function (e) {
        // (1)如果是右滑就是 播放上一张 moveX 是正值
        // (2)如果是左滑就是 播放下一张 moveX 是负值
        //移动才会执行回弹效果
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                //算法：（左方向）- 索引号*banner宽度
                var translatex = -index * w;
                //添加过渡效果
                ul.style.transition = 'all .3s';
                //沿着x轴移动
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        clearInterval(timer);
        //定时器
        var timer = setInterval(function () {
            index++;
            //算法：（左方向）- 索引号*banner宽度
            var translatex = -index * w;
            //添加过渡效果
            ul.style.transition = 'all .3s';
            //沿着x轴移动
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 设置了引入了 -->
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link rel="stylesheet" href="css/index.css">
    <title>携程在手，说走就走</title>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 返回顶部模块 -->
    <div class="goBack"></div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <ul>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>


</body>

</html>

body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #222;
}

div {
    box-sizing: border-box;
}


/* goBack */

.goBack {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: url(../images/back.png) no-repeat;
    background-size: 38px 38px;
}


/* focus */

.focus {
    position: relative;
    padding-top: 44px;
    overflow: hidden;
}

.focus img {
    width: 100%;
}

.focus ul {
    overflow: hidden;
    width: 500%;
    margin-left: -100%;
}

.focus ul li {
    float: left;
    width: 20%;
    display: block;
    height: 100px;
    background: rgb(69, 153, 236);
}

.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}

.focus ol li {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fff;
    list-style: none;
    border-radius: 2px;
    transition: all .3s;
}

.focus ol li.current {
    width: 15px;
}