WEB API 七

一 移动端轮播图
    01-移动端轮播图-结构搭建
    02-移动端轮播图-布局分析
    03-移动端轮播图-滚动图片
        让图片滚动的核心思路是什么？ 
        ul.style.transition = 'all .3s'
        ul.style.transform = 'translateX(' + translatex + 'px)';
    04-移动端轮播图-无缝滚动 如何监听过渡动画完成的事件？ 监听 transitionend 事件
    05-classList类名操作
        如何返回元素的类名？    element.classList
        如何添加元素的类名？    element.classList.add('类名')
        如何删除元素的类名？    element.classList.remove('类名')
        如何切换元素的类名？    element.classList.toggle('类名')
    06-移动端轮播图-小圆点跟随变化
        排他思想的新思路是什么？  
            先精准定位到具有current类名的元素，然后使用classList溢出current类名
                然后给自身添加current类名
    07-移动端轮播图-手指拖动轮播图
         手指触摸的时候停止定时器
         按照拖拽思路实现轮播图拖动
         拖动的时候应该去掉过渡动画
    08-移动端轮播图-手指滑动播放上一张下一张图片
          移动的绝对值大于50，开始切换轮播图 如果是负值 切换下一张 否则上一张
    09-移动端轮播图-回弹效果
           移动绝对值小于50 开始回弹
            重新启动定时器
            如果没有移动，判断返回顶部按钮的显示和隐藏
    10-返回顶部模块制作
            根据卷入顶部的距离 判断返回听不按钮的显示和隐藏
            点击按钮 回到顶部
    11-移动端click事件300ms延时问题解决方案    为什么移动端点击会有300ms延时的问题？
            移动端有双击缩放页面的功能 为了判定当前是单击还是双击 移动端在每次单击后悔等待300ms 如果300ms内有单击 就认为是双击 如果后续没有点击 就认为是单击
            如何解决移动端300ms延时的问题？
                方案1: 禁用浏览器缩放功能
                方案2: 利用touch事件封装点击事件
    12-fastclick插件使用 
        什么是插件？    其他人为了实现某个功能，专门写的js文件，叫做插件
        fastclick插件的使用流程？     1. 引入fastclick插件
        https://github.com/ftlabs/fastclick
        https://codechina.csdn.net/mirrors/ftlabs/fastclick
        2.从官网上复制初始化的代码
        3.以后直接使用常规方法绑定事件，不再会有延时问题
    13-swiper插件使用-引入相关文件
        如何引入swiper插件？    1.从官网下载swiper
        https://www.swiper.com.cn/
        2.参照官方demo，引入css，js
    14-移动端轮播图-按照语法规范使用
        使用swiper插件的基本流程是什么？
            1.从官方demo中复制html结构  注意不要修改结构和类名
            2.从官方demo中复制css
            3.从官方demo中复制js
            注意：需要哪种效果，就复制哪个demo
    17-视频插件zy.media.js的使用  官方地址：https://codechina.csdn.net/mirrors/ireaderlab/zyMedia
    18-bootstrap轮播图
        框架和插件的区别是什么？  
            框架： 大而全，一整套解决方案
               前端常用的框架有 Bootstrap、Vue、Angular、React 等
            插件： 小而专一，某个功能的解决方案
 二 本地存储
    1 本地存储值 sessionStorage
        sessionStorage有哪些特点？
            1 生命周期为关闭浏览器标签页
            2 在同一窗口(页面)下数据可以共享
            3 以键值对的形式存储使用
    2 存储数据 ？
        sessionStorage.setItem(key, value)
    3 获取数据？
        sessionStorage.getItem(key)
    4 删除数据？
        sessionStorage.removeItem(key)
    5 删除所有数据？     慎用
        sessionStorage.clear()
   三 本地存储值localStorage
     1 localStorage有哪些特点？
        生命周期永久生效 除非手动删除 否则关闭页面也会存在
        可以多窗口(页面)共享(同一浏览器可以共享)
        以键值对的形式存储使用
     2 存储数据？
        localStorage.seItem(key, value)
     3 获取数据？
         localStorage.getItem(key)
     4 删除数据？
         localStorage.removeItem(key)
     5 删除所有数据？ 
         localStorage.clear()
记住用户名 案例
      <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username')
            remember.checked = true
        }
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username')

            }
        })
        username.addEventListener('keyup', function() {
            console.log(1);
            if (remember.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.getItem('username')

            }
        })
    </script>


    window.addEventListener('load', function () {
    // 1 获取元素
    var focus = this.document.querySelector('.focus')
    var ul = focus.children[0]
    var ol = focus.children[1];
    // 获得focus的宽度
    var w = focus.offsetWidth
    // 2 利用定时器自动轮播图片
    var index = 0
    var timer = this.setInterval(function () {
        index++
        setounch(index, 'all .3s')
    }, 2000)
    // 等着我们过渡完成之后 再去判断 监听过去完成的事件 transition
    ul.addEventListener('transitionend', function () {
        // 无缝滚动 
        if (index >= ul.children.length - 2) {
            index = 0;
            // console.log(index);
            // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置
            // // 利用最新的索引号乘以宽度 去滚动图片
            setounch(index, 'none')
        } else if (index <= -1) {
            index = 2
            setounch(index, 'none')
        }
        // 获取ul里面所有带有current 的元素 然后将这个元素的类名移除 
        ol.querySelector('.current').classList.remove('current')
        // 让当前图片对应ol的小li的索引添加这个类名
        ol.children[index].classList.add('current')
    })
    //4 手指滑动轮播图
    // 触摸元素 touchstart 获取手指初始坐标
    var startX = 0
    var moveX = 0
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX
        clearInterval(timer)
    })
    // 移动手指 touchmove 计算手指的滑动距离 并且移动盒子
    ul.addEventListener('touchmove', function (e) {
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX
        // 移动盒子 盒子原来的位置 + 手指移动的距离
        // // 手指拖动的时候， 不需要动画效果所有要取消过渡
        setounch(index, 'none',  moveX)
        e.preventDefault() // 阻止手指默认行为
    })
    ul.addEventListener('touchend', function () {
        // moveX != 0 就代表已经拖动过了
        if (moveX != 0) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--
                } else {
                    index++
                }
            } else {
                setounch(index, 'all 1s')
            }
            setounch(index, 'all .3s')
    
            clearInterval(timer)
            timer = null
            if (timer === null) {
                timer = setInterval(function () {
                    index++
                    setounch(index, 'all .3s')
                }, 2000)
            }
        }
    })
    // 计算距离赋值函数
    function setounch(index, translate, moveX) {
        if (moveX) {
            var translatex = -index * w + moveX
        } else {
            var translatex = -index * w
        }
        ul.style.transition = translate
        ul.style.transform = 'translateX(' + translatex + 'px)'
    }

})