Javascript的知识总结-轮播图，移动端+pc端

来源博客：【Harryの心阁】

网页轮播图

1. 核心原理：使用动画函数，点击小圆圈，使用小圆圈的索引号来判断图片移动的距离
2. 使用getAttribute 通过自定义属性来记录小圈圈的索引号
3. 无缝滚动：克隆第一张，实现无缝跳转，克隆第一个节点cloneNode(),没有true浅克隆

window.addEventListener('DOMContentLoaded', function () {
    var w = document.querySelectorAll('.w');
    var mains = document.getElementsByTagName('main');
    var lunbo = document.querySelector('.lunbo');
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ulli = ul.querySelector('li')
    var cul = lunbo.querySelector('ul');
    var focuswidth = focus.offsetWidth;
    var circle = 0;
    var num = 0;
    // console.log(ul.children.length);
    // console.log(lunbo);
    // console.log(w);
    // console.log(mains);
    onmouseover = function () {
        lunbo.children[0].style.display = 'block'
        lunbo.children[1].style.display = 'block'
    }
    onmouseout = function () {
        lunbo.children[0].style.display = 'none'
        lunbo.children[1].style.display = 'none'
    }
    // 动态生成图片
    for (var i = 0; i < ul.children.length; i++) {
        var cli = document.createElement('li');
        cli.setAttribute('index', i);
        cul.appendChild(cli);
        // 使用排他思想,先全部清空再给当前的xiaoli设置元素类型
        cli.addEventListener('click', function () {
            for (var i = 0; i < ul.children.length - 1; i++) {
                cul.children[i].className = '';
                console.log(cul.children[i]);
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            // 点击后获取小圈圈当前的索引值，并将值赋值给控制小圈圈的circle和控制图片所在位置的num
            num = circle = index; 

            // console.log(index);
            // console.log(focuswidth);
            animate(ul, -index * focuswidth, 1)
        })
    }
    cul.children[0].className = 'current';
    var firstimg = ulli.cloneNode(true);
    ul.append(firstimg);
    // 点击右侧按钮图片移动一张
    lunbo.children[1].addEventListener('click', function () {
        // 生成第一张图片克隆
        num++;
        // 通过缓动动画来控制图片的移动
        animate(ul, -num * focuswidth, 15);
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        circle++;
        if (circle == cul.children.length) {
            circle = 0;
            cul.children[cul.children.length - 1].className = '';
            cul.children[0].className = 'current';
        } else {
            for (var i = 0; i <= cul.children.length - 1; i++) {
                cul.children[i].className = ''
            }
            cul.children[circle].className = 'current'
            // 小圆圈跟随变
        }
    })

    // 左侧按钮
    // 点击左侧按钮图片移动一张
    lunbo.children[0].addEventListener('click', function () {
        // 生成第一张图片克隆
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focuswidth + 'px';
        }
        num--;
        animate(ul, -num * focuswidth, 15);
        // if (num == ul.children.length - 1) {
        //     ul.style.left = 0;
        //     num = 0;
        // }
        circle--;
        if (circle < 0) {
            circle = cul.children.length - 1;
            cul.children[circle].className = 'current';
            cul.children[0].className = '';
        } else {
            for (var i = 0; i <= cul.children.length - 1; i++) {
                cul.children[i].className = ''
            }
            cul.children[circle].className = 'current'
            // 小圆圈跟随变
        }
    })

})

自动播放

1. 定时器，手动调用事件
2. 事件.click

var timerr = setInterval(function(){
    lunbo.children[1].click();
},2000)

节流阀

使用回调函数，在点击事件后添加一个flag=true，来控制速率

var flag = true;
obj.onclick = function(){
flag=false;
animate(obj,target,function(){
flag = true;
})
}

返回顶部案例

1. 方法一：使html/body元素滚轮距离顶部为0

        btn.addEventListener('click',function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        })

2. 方法二: 控制window滚轮的位置

        btn.addEventListener('click',function(){
            window.scroll(0,0);
        })

3. 方法三：引入缓动动画函数

        // 第三种 引入缓动函数
        btn.addEventListener('click',function(){
            animateY(window,0,15)
        })

移动端事件

1. 触屏事件，touchstart/touchmove/touched
2. 触摸事件TouchEvent
3. // touches正在触摸屏幕的所有手指的列表// targetTouches 在触摸当前元素DOM的手指列表// changedTouches 检测手指列表，手指状态变化// 当手指离开屏幕时 touches和targetTouches列表没有，只能拿到changedTouches
4. 拖动元素三部曲：

• 触摸元素touchstart：获取手指的初始位置，同时获得盒子原来的位置
• 移动手指 touchmove 计算手指滑动距离，并且移动盒子，手指移动的距离加上盒子原来的位置
• 离开手指 touchend

    <style>
        div{
            position: absolute;
            width: 100px;
            height: 200px;
            background-color: rgb(24, 153, 212);
        }
    </style>
    <div>
    
    </div>
    <script>
        var startX = 0;
        var startY = 0;
        var x = 0;
        var y = 0;
        var div =document.querySelector('div')
        div.addEventListener('touchstart',function(e){
            console.log('我开始模拟了');
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
            // touches正在触摸屏幕的所有手指的列表
            // targetTouches  在触摸当前元素DOM的手指列表
            // changedTouches 检测手指列表，手指状态变化
            // 当手指离开屏幕时 touches和targetTouches列表没有，只能拿到changedTouches
        })
        div.addEventListener('touchmove',function(e){
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY -startY;
            this.style.left = x + moveX +'px';            
            this.style.top = y + moveY +'px';  
            e.preventDefault();          
        })

移动端无缝滚动

1. 添加监听事件，加入判断事件
2. transitionend,在去掉过渡效果

classList属性

1. classList属性,追加类名，和ClassName对比，不需要加.,移除remove，格式div.classLest.add/remove
2. 切换类document.body.classList.toggle('')