forked from wuyawei/fe-code
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path2.html
More file actions
126 lines (113 loc) · 5.49 KB
/
Copy path2.html
File metadata and controls
126 lines (113 loc) · 5.49 KB
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en" style="font-size: 50px">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.carousel{
width:500px;
height:300px;
overflow:hidden;
white-space: nowrap;
outline: solid 1px blue;
}
.carousel>img{
width:100%;
height:100%;
display:inline-block;
transition:ease 0.5s;
}
</style>
<div id="container">
</div>
<input type="text" id='user'>
<script>
let data = [
"https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg",
"https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg",
"https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg",
"https://static001.geekbang.org/resource/image/73/e4/730ea9c393def7975deceb48b3eb6fe4.jpg"
];
class Carousel {
constructor(container){
this._container = container;
this._container.classList.add("carousel");
this._handler = null;
this.data = null;
}
render(){
for(let d of this.data) {
let e = document.createElement("img");
e.src = d;
this._container.appendChild(e);
}
let children = Array.prototype.slice.call(container.children);
let position = 0;
let nextFrame = ()=>{
let nextPosition = position + 1;
nextPosition = nextPosition % children.length;
let current = children[position],
next = children[nextPosition];
//把next摆到正确的位置
next.style.transition = "ease 0s";
next.style.transform = `translate(${100 - 100 * nextPosition}%)`
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
//把current挪出视口
current.style.transition = ""; //transition置空，css中的属性就会生效
current.style.transform = `translate(${- 100 - 100 * position}%)`
//把next挪进视口
next.style.transition = "";
next.style.transform = `translate(${- 100 * nextPosition}%)`
position = nextPosition;
});
})
//for(let child of children) {
// child.style.transform = `translate(${-100 * position}%)`;
//}
time = setTimeout(nextFrame, 1000);
}
let time = setTimeout(nextFrame,1000);
let fontSize = document.documentElement.style.fontSize.slice(0, -2);
let startX;
let startTransform;
let width = 500 / fontSize;
let start = event =>{
event.preventDefault();
startX = event.clientX;
startTransform = - position * width;
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", end);
}
let move = event =>{
event.preventDefault();
for(let child of children) {
child.style.transition = "ease 0s";
child.style.transform = `translate(${startTransform + (event.clientX - startX)/fontSize}rem)`;
}
}
let end = ()=>{
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", end);
position = - (Math.round(- position + (event.clientX - startX) / fontSize / width));
position = Math.max(0, Math.min(position, children.length - 1));
for(let child of children) {
child.style.transition = "";
child.style.transform = `translate(${ - position * width}rem)`;
}
}
this._container.addEventListener("mousedown",start);
this._container.addEventListener("mouseout",() => {
time = setTimeout(nextFrame,1000);
});
this._container.addEventListener("mouseover",() => {
clearInterval(time);
});
}
}
let carousel = new Carousel(document.getElementById("container"));
carousel.data = data;
carousel.render();
</script>
</html>