-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
496 lines (466 loc) · 28.1 KB
/
Copy pathindex.html
File metadata and controls
496 lines (466 loc) · 28.1 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
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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>522帝国</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
// 配置Tailwind自定义颜色和字体
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B5CF6',
secondary: '#EC4899',
dark: '#1E1B4B',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.1), 0 8px 10px -6px rgba(139, 92, 246, 0.1);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
}
/* 滑动容器样式 */
.page-scroll-container {
scrollbar-width: none; /* 隐藏Firefox滚动条 */
}
.page-scroll-container::-webkit-scrollbar {
display: none; /* 隐藏Chrome滚动条 */
}
.page-item {
height: 100vh; /* 每页占满屏幕高度 */
}
/* 箭头按钮样式 */
.next-page-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.next-page-btn:hover {
transform: translateX(10px) scale(1.1);
box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}
.next-page-btn:hover .arrow {
animation: arrow-pulse 1.5s infinite;
}
@keyframes arrow-pulse {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
/* 页指示器样式 */
.page-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
transition: all 0.3s ease;
}
.page-indicator.active {
width: 30px;
border-radius: 5px;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-dark min-h-screen text-white overflow-hidden">
<!-- 背景图片遮罩 -->
<div class="fixed inset-0 bg-cover bg-center opacity-20 z-0" style="background-image: url('https://www.loliapi.com/acg/');"></div>
<!-- 页面滑动容器 -->
<div class="page-scroll-container flex h-screen overflow-x-auto scroll-snap-type x mandatory" id="scrollContainer">
<!-- 第一页:原有成员卡片 -->
<div class="page-item w-full flex-shrink-0 scroll-snap-align start" id="page1">
<div class="container mx-auto px-4 py-12 relative z-10 h-full flex flex-col">
<div class="page-title text-center mb-16">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">522帝国成员介绍</h1>
<p class="text-lightpink text-lg max-w-2xl mx-auto">我们的故事,从这里开始...</p>
</div>
<div class="card-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 flex-grow">
<!-- 成员卡片1 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV18yWwzeEFB">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=1" alt="初开loves" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">ChuKai</h3>
<span class="nickname text-primary mb-3 inline-block">Minecraft</span>
<p class="info text-gray-300 mb-4">与其仓皇追赶落日,不如静待满天繁星</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">熬夜冠军</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">erp高手</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">德芙爱好者</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 成员卡片2 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1sXnwz7EKY">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=2" alt="AnYu" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">视觉</h3>
<span class="nickname text-primary mb-3 inline-block">京爷</span>
<p class="info text-gray-300 mb-4">神秘的男人</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">学渣</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">泽连斯基</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">容易被骗</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 成员卡片3 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1RW4NzxE5B">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=3" alt="井川叶子" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">井川叶子</h3>
<span class="nickname text-primary mb-3 inline-block">权威王者一万星</span>
<p class="info text-gray-300 mb-4">生命在于运动</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">瑞幸</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">王者</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">快手男生</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 成员卡片4 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1ef421i7mm">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=4" alt="西瓜OvO" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">西瓜OvO</h3>
<span class="nickname text-primary mb-3 inline-block">超级M</span>
<p class="info text-gray-300 mb-4">好用的西瓜杯子</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">erp</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">银角</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">baka</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 成员卡片5 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1jzxnzqEmj">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=5" alt="ZHIHAN" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">ZHIHAN</h3>
<span class="nickname text-primary mb-3 inline-block">牢大忠实粉丝</span>
<p class="info text-gray-300 mb-4">日毛联邦主席</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">修仙</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">不能管制</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">晕厥3D</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 成员卡片6 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1hzxqzrEoz">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=6" alt="XueSong" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">XueSong</h3>
<span class="nickname text-primary mb-3 inline-block">足浴店常客</span>
<p class="info text-gray-300 mb-4">日毛联邦副主席</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">高材生</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">高冷男神</span>
<span class="tag bg-primary/20 text-primary px-3 py-1 rounded-full text-sm">抽象但是不说</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第二页:新增成员卡片 -->
<div class="page-item w-full flex-shrink-0 scroll-snap-align start" id="page2">
<div class="container mx-auto px-4 py-12 relative z-10 h-full flex flex-col">
<div class="page-title text-center mb-16">
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-secondary to-primary">522帝国成员介绍 · 第二页</h1>
<p class="text-lightpink text-lg max-w-2xl mx-auto">我们的故事,仍在继续...</p>
</div>
<div class="card-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 flex-grow">
<!-- 第二页成员卡片1 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV18yWwzeEFB">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=7" alt="Member07" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">bwdxc</h3>
<span class="nickname text-secondary mb-3 inline-block">原神大神</span>
<p class="info text-gray-300 mb-4">原神牛逼</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">抽象鼻祖</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">突然嚎叫</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">欧皇附体</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 第二页成员卡片2 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1sXnwz7EKY">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=8" alt="Member08" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">豆神</h3>
<span class="nickname text-secondary mb-3 inline-block">金铲铲诗人</span>
<p class="info text-gray-300 mb-4">有趣的灵魂终会相遇</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">金铲铲</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">咖啡师</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">科幻迷</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 第二页成员卡片3 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1RW4NzxE5B">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=9" alt="Member09" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">艺</h3>
<span class="nickname text-secondary mb-3 inline-block">旅行日记</span>
<p class="info text-gray-300 mb-4">全力以赴,未来可期</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">摄影师</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">美食家</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">徒步者</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 第二页成员卡片4 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1ef421i7mm">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=10" alt="Member10" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">安宇</h3>
<span class="nickname text-secondary mb-3 inline-block">内向可爱</span>
<p class="info text-gray-300 mb-4">平安喜乐,万事顺意</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">塔可夫达人</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">喜欢猫猫</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">古希腊掌握python的神</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 第二页成员卡片5 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1jzxnzqEmj">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=11" alt="Member11" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">马西西</h3>
<span class="nickname text-secondary mb-3 inline-block">红烧肉</span>
<p class="info text-gray-300 mb-4">以梦为马,不负韶华</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">FPS大神</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">健身党</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">可乐狂热爱好者</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
<!-- 第二页成员卡片6 -->
<div class="mate-card bg-gray-800/70 rounded-xl overflow-hidden card-shadow card-hover cursor-pointer" data-video="https://player.bilibili.com/player.html?bvid=BV1hzxqzrEoz">
<div class="card-img h-64 overflow-hidden">
<img src="https://www.loliapi.com/acg/?id=12" alt="Member12" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
</div>
<div class="card-content p-6">
<h3 class="text-2xl font-bold mb-1 text-white">小优</h3>
<span class="nickname text-secondary mb-3 inline-block">初开爱徒</span>
<p class="info text-gray-300 mb-4">心有山海,静而无边</p>
<div class="tags flex flex-wrap gap-2">
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">吉他手</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">vinyl收藏者</span>
<span class="tag bg-secondary/20 text-secondary px-3 py-1 rounded-full text-sm">夜猫子</span>
</div>
<div class="mt-4 flex items-center text-gray-400 text-sm">
<i class="fa fa-play-circle mr-2"></i>
<span>点击查看视频</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 翻页按钮 -->
<button id="nextPageBtn" class="next-page-btn fixed right-6 top-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white p-4 rounded-full shadow-lg z-50">
<i class="fa fa-arrow-right text-2xl arrow"></i>
</button>
<button id="prevPageBtn" class="next-page-btn fixed left-6 top-1/2 -translate-y-1/2 bg-gradient-to-r from-secondary to-primary text-white p-4 rounded-full shadow-lg z-50 opacity-0 transition-opacity duration-300">
<i class="fa fa-arrow-left text-2xl arrow"></i>
</button>
<!-- 页码指示器 -->
<div class="flex justify-center gap-2 fixed bottom-6 left-0 right-0 z-50">
<div class="page-indicator active bg-primary" data-page="1"></div>
<div class="page-indicator bg-gray-600" data-page="2"></div>
</div>
<script>
// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
const scrollContainer = document.getElementById('scrollContainer');
const nextPageBtn = document.getElementById('nextPageBtn');
const prevPageBtn = document.getElementById('prevPageBtn');
const pageIndicators = document.querySelectorAll('.page-indicator');
const pages = {
1: document.getElementById('page1'),
2: document.getElementById('page2')
};
let currentPage = 1;
const totalPages = Object.keys(pages).length;
// 更新页码指示器状态
function updateIndicators() {
pageIndicators.forEach(indicator => {
const pageNum = parseInt(indicator.dataset.page);
if (pageNum === currentPage) {
indicator.classList.add('active', 'bg-primary');
indicator.classList.remove('bg-gray-600');
} else {
indicator.classList.remove('active', 'bg-primary');
indicator.classList.add('bg-gray-600');
}
});
}
// 更新按钮显示状态
function updateButtons() {
if (currentPage === 1) {
prevPageBtn.classList.add('opacity-0', 'pointer-events-none');
} else {
prevPageBtn.classList.remove('opacity-0', 'pointer-events-none');
}
if (currentPage === totalPages) {
nextPageBtn.classList.add('opacity-0', 'pointer-events-none');
} else {
nextPageBtn.classList.remove('opacity-0', 'pointer-events-none');
}
}
// 切换到指定页面
function goToPage(pageNum) {
if (pages[pageNum]) {
currentPage = pageNum;
const scrollPosition = pages[pageNum].offsetLeft;
scrollContainer.scrollTo({
left: scrollPosition,
behavior: 'smooth'
});
updateIndicators();
updateButtons();
}
}
// 下一页按钮点击事件
nextPageBtn.addEventListener('click', function() {
if (currentPage < totalPages) {
goToPage(currentPage + 1);
}
});
// 上一页按钮点击事件
prevPageBtn.addEventListener('click', function() {
if (currentPage > 1) {
goToPage(currentPage - 1);
}
});
// 页码指示器点击事件
pageIndicators.forEach(indicator => {
indicator.addEventListener('click', function() {
const pageNum = parseInt(this.dataset.page);
goToPage(pageNum);
});
});
// 监听滚动事件,更新当前页码
scrollContainer.addEventListener('scroll', function() {
const scrollLeft = this.scrollLeft;
const containerWidth = this.offsetWidth;
// 判断当前显示的页面
if (scrollLeft > containerWidth / 2) {
currentPage = 2;
} else {
currentPage = 1;
}
updateIndicators();
updateButtons();
});
// 卡片点击打开视频功能
const cards = document.querySelectorAll('.mate-card');
cards.forEach(card => {
card.addEventListener('click', function() {
const videoUrl = this.getAttribute('data-video');
if (videoUrl) {
this.classList.add('opacity-50');
setTimeout(() => {
window.open(videoUrl, '_blank');
this.classList.remove('opacity-50');
}, 300);
}
});
});
// 初始化
updateIndicators();
updateButtons();
});
</script>
</body>
</html>