-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbanner5.html
229 lines (219 loc) · 5.72 KB
/
banner5.html
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*轮播图*/
.jd_banner{
width: 100%;
overflow: hidden;
position: relative;
}
.jd_banner ul:first-child{
width: 1000%;
transform: translateX(-10%);
-webkit-transform: translateX(-10%);
}
.jd_banner ul:first-child li{
width: 10%;
float: left;
}
.jd_banner ul:first-child li a{
display: block;
width: 100%;
}
.jd_banner ul:first-child li a img{
display: block;
width: 100%;
}
.jd_banner ul:last-child{
position: absolute;
width: 118px;
height: 6px;
left: 50%;
margin-left:-59px;
bottom: 6px;
}
.jd_banner ul:last-child li{
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #fff;
margin-left:10px;
float: left;
}
.jd_banner ul:last-child li:first-child{
margin-left:0;
}
.jd_banner ul:last-child li.now{
background: #fff;
}
</style>
</head>
<body>
<!--轮播图-->
<div class="jd_banner">
<ul class="clearFix">
<li><a href="#"><img src="./imgs/1.jpg" alt=""></a></li>
<li><a href="#"><img src="./imgs/2.jpg" alt=""></a></li>
<li><a href="#"><img src="./imgs/3.jpg" alt=""></a></li>
<li><a href="#"><img src="./imgs/4.jpg" alt=""></a></li>
<li><a href="#"><img src="./imgs/5.jpg" alt=""></a></li>
<li><a href="#"><img src="./imgs/img1.png" alt=""></a></li>
<li><a href="#"><img src="./imgs/img2.png" alt=""></a></li>
<li><a href="#"><img src="./imgs/img3.png" alt=""></a></li>
<li><a href="#"><img src="./imgs/1.jpg" alt=""></a></li>
<li><a href="#"><img src="./imgs/2.jpg" alt=""></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var banner = function () {
/*1. 自动轮播图且无缝 定时器，过渡*/
/*2. 点要随着图片的轮播改变 根据索引切换*/
/*3. 滑动效果 利用touch事件完成*/
/*4. 滑动结束的时候 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡*/
/*5. 滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，过渡*/
/*轮播图*/
var banner = document.querySelector('.jd_banner');
/*屏幕宽度*/
var width = banner.offsetWidth;
/*图片容器*/
var imageBox = banner.querySelector('ul:first-child');
/*点容器*/
var pointBox = banner.querySelector('ul:last-child');
/*所有的点*/
var points = pointBox.querySelectorAll('li');
var addTransition = function () {
imageBox.style.transition = 'all 0.2s';
imageBox.style.webkitTransition = 'all 0.2s';
}
var removeTransition = function () {
imageBox.style.transition = 'none';
imageBox.style.webkitTransition = 'none';
}
var setTranslateX = function (translateX) {
imageBox.style.transform = 'translateX(' + translateX + 'px)';
imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
}
/*程序的核心 index */
var index = 1;
var timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 1000);
/*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
//在每次过渡结束后会触发该函数
imageBox.addEventListener('transitionend', function () {
/*自动滚动的无缝*/
if (index >= 9) {
index = 1;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*滑动的时候也需要无缝*/
else if (index <= 0) {
index = 8;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*根据索引设置点*/
/*此时此刻 index 的取值范围 1-8（0,8--1,9）*/
/*点索引 index - 1 */
setPoint();
});
/*设置点的方法*/
var setPoint = function () {
/*index 1-8*/
/*清除样式*/
for (var i = 0; i < points.length; i++) {
var obj = points[i];
obj.classList.remove('now');
}
/*给对应的加上样式*/
points[index - 1].classList.add('now');
}
/*绑定事件*/
var startX = 0;
var distanceX = 0;
var isMove = false;
imageBox.addEventListener('touchstart', function (e) {
/*清除定时器*/
clearInterval(timer);
/*记录起始位置的X坐标*/
startX = e.touches[0].clientX;
});
imageBox.addEventListener('touchmove', function (e) {
/*记录滑动过程当中的X坐标*/
var moveX = e.touches[0].clientX;
/*计算位移 有正负方向*/
distanceX = moveX - startX;
/*计算目标元素的位移 不用管正负*/
/*元素将要的定位=当前定位+手指移动的距离*/
var translateX = -index * width + distanceX;
/*滑动--->元素随着手指的滑动做位置的改变*/
removeTransition();
setTranslateX(translateX);
//是否发生了移动
isMove = true;
});
imageBox.addEventListener('touchend', function (e) {
/*4. 5. 实现*/
/*要使用移动的距离*/
if (isMove) {
if (Math.abs(distanceX) < width / 3) {
/*吸附*/
addTransition();
setTranslateX(-index * width);
} else {
/*切换*/
/*右滑动 上一张*/
if (distanceX > 0) {
index--;
}
/*左滑动 下一张*/
else {
index++;
}
/*根据index去动画的移动*/
addTransition();
setTranslateX(-index * width);
}
}
/*最好做一次参数的重置*/
startX = 0;
distanceX = 0;
isMove = false;
/*加上定时器*/
clearInterval(timer);
timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 1000);
});
}
</script>
</body>
</html>