-
Notifications
You must be signed in to change notification settings - Fork 0
/
前端-第5周第1次-JS(4)-2022·2·15.html
133 lines (109 loc) · 6.06 KB
/
前端-第5周第1次-JS(4)-2022·2·15.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>前端-第5周第1次-JS(4)-2022·2·15</title>
<link rel="stylesheet" type="text/css" href="./normalize.css">
<link rel="stylesheet" type="text/css" href="./reset.css">
<link rel="stylesheet" type="text/css" href="./前端-第5周第1次-JS(4)-2022·2·15.css">
<script type="text/javascript" src="./前端-第5周第1次-JS(4)-2022·2·15.js"></script>
</head>
<body>
<div class="box">
<!-- 列表部分 -->
<ul class="list" style="transform: translateX(0px);">
<!-- 1 -->
<li class="item" data-id="1">
<a href="https://www.bilibili.com/bangumi/play/ep467543" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/fce0fcdb3869a86b5a159cd84b37c14053fb0890.png@976w_550h_1c.webp" alt="魔教四血侍现身，黑煞教主邪功祸世！">
<div>魔教四血侍现身，黑煞教主邪功祸世！</div>
</a>
</li>
<!-- 2 -->
<li class="item" data-id="2">
<a href="https://www.bilibili.com/bangumi/play/ep468619" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/ec1aa3efcc36f91658215b90cc8f72013bccb38c.png@976w_550h_1c.webp" alt="富豪谷底求翻身：废旧旅舍改造！">
<div class="title">富豪谷底求翻身：废旧旅舍改造！</div>
</a>
</li>
<!-- 3 -->
<li class="item" data-id="3">
<a href="https://www.bilibili.com/blackboard/activity-lKPlNv3Fdf.html" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/b6bc18ec7a70220077697b717b4aa03f09e23ca1.png@976w_550h_1c.webp" alt="元宵佳节 好梦圆圆~">
<div class="title">元宵佳节 好梦圆圆~</div>
</a>
</li>
<!-- 4 -->
<li class="item" data-id="4">
<a href="https://www.bilibili.com/bangumi/play/ep469599" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/03c11ccf9ceb56df157171fab8e6c406ff3b6c44.png@976w_550h_1c.webp" alt="绿色星球：揭秘那些超出想象的摄影技术">
<div class="title">绿色星球：揭秘那些超出想象的摄影技术</div>
</a>
</li>
<!-- 5 -->
<li class="item" data-id="5">
<a href="https://www.bilibili.com/blackboard/activity-6XkN4Dltml.html" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/d598ed8e4101005635e3dced33f2c656ef50af76.jpg@976w_550h_1c.webp" alt="必剪上线解说音色，快来激情解说！">
<div class="title">必剪上线解说音色，快来激情解说！</div>
</a>
</li>
<!-- 6 -->
<li class="item" data-id="6">
<a href="https://www.bilibili.com/blackboard/activity-NifV129EDS.html" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/fcb92527291b7b4079a705967623a943910d0753.png@976w_550h_1c.webp" alt="这个世界约好一起逛...">
<div class="title">这个世界约好一起逛...</div>
</a>
</li>
<!-- 7 -->
<li class="item" data-id="7">
<a href="https://www.bilibili.com/blackboard/live/activity-ka7itNP6bm.html" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/02b8c275f50176d97b62d342759168b6dfabd6a3.jpg@976w_550h_1c.webp" alt="速领20W拜年金！">
<div class="title">速领20W拜年金！</div>
</a>
</li>
<!-- 8 -->
<li class="item" data-id="8">
<a href="https://www.bilibili.com/blackboard/activity-foKiAkNBDb.html" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/5eb166933f0f1eb91dcfdb8c4355011c7636666c.jpg@976w_550h_1c.webp" alt="情人节听情歌！快来听听！">
<div class="title">情人节听情歌！快来听听！</div>
</a>
</li>
<!-- 9 -->
<li class="item" data-id="9">
<a href="https://www.bilibili.com/read/cv15259416" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/25c389570c4fdb5d3fbd04e12f0294fcaef3f25a.jpg@976w_550h_1c.webp" alt="٩(๑❛ᴗ❛๑)۶进来看点更虎的">
<div class="title">٩(๑❛ᴗ❛๑)۶进来看点更虎的</div>
</a>
</li>
<!-- 10: 同1 衔接用 -->
<li class="item" data-id="1">
<a href="https://www.bilibili.com/bangumi/play/ep467543" target="_blank">
<img src="https://i0.hdslb.com/bfs/feed-admin/fce0fcdb3869a86b5a159cd84b37c14053fb0890.png@976w_550h_1c.webp" alt="魔教四血侍现身，黑煞教主邪功祸世！">
<div class="title">魔教四血侍现身，黑煞教主邪功祸世！</div>
</a>
</li>
</ul>
<!-- 页面切页点显示部分 -->
<ul class="points">
<li class="point-active" data-id="1"></li>
<li class="" data-id="2"></li>
<li class="" data-id="3"></li>
<li class="" data-id="4"></li>
<li class="" data-id="5"></li>
<li class="" data-id="6"></li>
<li class="" data-id="7"></li>
<li class="" data-id="8"></li>
<li class="" data-id="9"></li>
</ul>
<!-- 页面左右切换按钮部分 -->
<div class="switch">
<div class="left">
<div class="arrow arrow_left"></div>
</div>
<div class="right">
<div class="arrow arrow_right"></div>
</div>
</div>
</div>
</body>
</html>