网页轮播图

网页轮播图

  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>