18-移动端特效 - 《JavaScript 基础 & jQuery 使用》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 引入样式 -->
    <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><img src="./upload/focus3.jpg" alt=""></li>
            <li><img src="./upload/focus1.jpg" alt=""></li>
            <li><img src="./upload/focus2.jpg" alt=""></li>
            <li><img src="./upload/focus3.jpg" alt=""></li>
            <li><img src="./upload/focus1.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>

/* 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 ul {
    overflow: hidden;
    width: 500%;
    /* 左移和父级一样宽 */
    margin-left: -100%;
}
.focus ul li {
    float: left;
    width: 20%;
}
.focus img {
    width: 100%;
}
.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}
.focus ol li {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: red;
    list-style: none;
    border-radius: 2px;
    transition: all .3s;
}
.focus ol li.current {
    width: 15px;
}

window.addEventListener('load', function () {
    // 1. 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    //获取focus的宽度
    var w = focus.offsetWidth;
    var ol = focus.children[1];
    //利用定时器 自动播放
    var index = 0;
    var timer = setInterval(function () {
        index++;
        //每次移动距离
        var translatex = -index * w;
        //给ul添加过渡效果  实现图片移动
        ul.style.transition = 'all .3s';
        //使用transform 就不需要使用定位了
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    // 2. 无缝滚动：监听过渡事件transitionend完成之后 再调换位置 
    ul.addEventListener('transitionend', function () {
        //无缝滚动  走到最后一张 让索引号恢复为0 
        if (index >= 3) {
            index = 0;
            //去掉过渡 让ul 款速的跳转到目标位置（下标为0的位置）
            ul.style.transition = 'none';
            // 去掉过渡后先移位到最开始下标为0 的位置
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            // 去掉过渡后先移位到最开始下标为0 的位置
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 3. 小圆点跟随变化
        // 把ol里面li 带有current类名的选出来 去掉类名 remove
        ol.querySelector('li.current').classList.remove('current');
        // 让当前索引号的小li 加上current add
        ol.children[index].classList.add('current');
    })
    // 4. 手指滑动轮播图
    // 触摸元素 touchstart： 获取手指初始坐标
    var startX = 0;
    var moveX = 0; //后面我们还会使用这个移动距离 
    var flag = false; //用户按下后 没有挪动
    ul.addEventListener('touchstart', function (e) {
        //触屏的时候停止计时器
        clearInterval(timer);
        startX = e.targetTouches[0].pageX;
        console.log(startX);
    })
    // 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
    ul.addEventListener('touchmove', function (e) {
        flag = true; //表示移动了
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // 移动盒子： 盒子原来的位置 +手指移动的距离 
        // 因为原来的位置一定是靠边的 所以这里的初始位置值为 -index * w
        var translatex = -index * w + moveX;
        // 手指拖动的时候 不需要动画效果 所以去掉过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        e.preventDefault(); //阻止滚动屏幕
    })
    ul.addEventListener('touchend', function () {
        if (flag) { //只有手指移动之后 我们才判断是否回弹 或者播放下一张
            // (1) 如果移动距离大于50像素 我们就播放上一张 或者下一张
            if (Math.abs(moveX) > 50) {
                // 如果是右边滑动 就是播放上一张 moveX是正值
                if (moveX > 0) {
                    index--;
                } else {
                    // 如果是左边滑动 就是播放上一张 moveX是负值
                    index++;
                }
                // 做运动
                var translatex = -index * w;
                //给ul添加过渡效果  实现图片移动
                ul.style.transition = 'all .3s';
                //使用transform 就不需要使用定位了
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                // (2)如果移动距离 小于50px 我们就回弹
                var translatex = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
            flag = false;
        }
        //手指离开重启定时器 
        clearInterval(timer); //先清除定时器
        timer = setInterval(function () {
            index++;
            //每次移动距离
            var translatex = -index * w;
            //给ul添加过渡效果  实现图片移动
            ul.style.transition = 'all .3s';
            //使用transform 就不需要使用定位了
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    })
      //返回顶部模块制作
    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);
    })
})