网页轮播图

网页轮播图

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

查看案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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

查看实例

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

节流阀

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

查看实例

1
2
3
4
5
6
7
var flag = true;
obj.onclick = function(){
flag=false;
animate(obj,target,function(){
flag = true;
})
}

返回顶部案例

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

    查看实例

    1
    2
    3
    btn.addEventListener('click',function(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    })
  2. 方法二: 控制window滚轮的位置

    查看实例

    1
    2
    3
    btn.addEventListener('click',function(){
        window.scroll(0,0);
    })
  3. 方法三：引入缓动动画函数

    查看实例

    1
    2
    3
    4
    // 第三种 引入缓动函数
    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

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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,在去掉过渡效果

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var foli = focus.querySelectorAll('li');
    var ul = focus.children[0];
    var wid = focus.offsetWidth;
    var ol = focus.querySelector('ol');
    console.log(foli.length);
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var indexw = -index * wid;
        ul.style.transition = 'all .4s';
        ul.style.transform = 'translateX(' + indexw + 'px)';
    }, 2000)
    ul.addEventListener('transitionend', function () {
        console.log('1');
        if (index == 3) {
            index = 0;
            console.log(index);
            ul.style.transition = 'none'
            var indexw = -index * wid;
            ul.style.transform = 'translateX(' + indexw + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none'
            var indexw = -index * wid;
            ul.style.transform = 'translateX(' + indexw + 'px)';
        }
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    })
    var startx = 0;
    var movex = 0;
    ul.addEventListener('touchstart', function (e) {
        var startx = e.targetTouches[0].pageX;
        console.log(startx);
        clearInterval(timer);
    })
    ul.addEventListener('touchmove', function (e) {
        var movex = e.targetTouches[0].pageX - startx;
        var translatex = movex + index * -wid;
        console.log(movex);
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    })
    ul.addEventListener('touchend', function (e) {
        if (Math.abs(movex) > 50) {
            if (movex > 0) {
                index--;
            }
            else {
                index++;
            }
            var translatex = -index * wid;
            ul.style.transition = 'all .4s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }else{
            var translatex = -index * wid;
            ul.style.transition = 'all .4s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
    })
})

classList属性

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

click延时解决方案

  1. 禁止页面的缩放
  2. 封装函数，解决300ms延时情况
  3. 引入js插件 fastclick，在GitHub仓库内

查看代码

1
//https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/fastclick.js

使用js插件/框架

  1. swiper的插件CDN
  2. Touchslide插件
  3. zy.media.js插件，页面适配框架适配不同浏览器
  4. 框架：bootstrap（依赖JQ），vue，react，zepto

本地存储

  1. sessionStorage，生命周期为关闭浏览器窗口
  • 格式 sessionStorage.setItem(key,value),存储
  • sessionStorage.getItem(key) 获取
  • sessionStorage.removeItem(key) 删除数据
  • sessionStorage.clear(); 删除全部数据
  1. localStroage,生命周期永久生效，使用方法雷同

查看实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input type="text" name="" id="inp"><input type="checkbox" name="" id="inp1">记住用户
<script>
    var inp = document.querySelector('#inp');
    var inp1 = document.querySelector('#inp1');
    if(localStorage.getItem('inp')){
        inp.value = localStorage.getItem('inp');
        inp1.checked = true;
    }
    inp1.addEventListener('change',function(){
        if(this.checked && inp.value != ''){
            localStorage.setItem('inp',inp.value)
            console.log(inp.value);
        }
        else{
            localStorage.removeItem('inp')
        }
    })
</script>