-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (115 loc) · 4.88 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>musicPlayer</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slideshow.css">
</head>
<body>
<header>
<img src="img/icon.png" alt="">
<span>viva 音乐</span>
<div id="id-top-playing">
<span>正在播放 :</span>
<span id="id-top-playing-name"></span>
</div>
</header>
<main id="id-main" data-page="0">
<div id="id-pre-page" class="prePage to-page">
<img class="midXY" src="img/prePage.png" alt="">
</div>
<div id="id-next-page" class="nextPage to-page">
<img class="midXY" src="img/nextPage.png" alt="">
</div>
<audio id="id-audio-player">
<source src="music/演员.mp3">
</audio>
<section id="id-page-0" class="main-page">
<section class="slideshow">
<div id="id-slideshow">
<span class="photo p1" id="id-photo-0"><a>1</a></span>
<span class="photo p2" id="id-photo-1"><a>2</a></span>
<span class="photo p3" id="id-photo-2"><a>3</a></span>
<span class="photo p4" id="id-photo-3"><a>4</a></span>
<span class="photo p5" id="id-photo-4"><a>5</a></span>
</div>
</section>
<section id="id-recommendation">
<a>推荐歌曲</a>
<div id="id-recommendation-list">
</div>
</section>
</section>
<section id="id-page-1" class="main-page">
<section class="left-aside aside">
<img id="id-down" src="img/down.png">
<div class="music-cd">
<span class="cd-outside midXY">
<span id="id-rotate-cd" class="cd midXY bag">
<span class="bag midXY" id="id-cd-cover">
</span>
</span>
</span>
</div>
<div id="id-music-name">
<span id="id-current-musci">告白气球 -- 周杰伦</span>
<div class="music-funtion">
<span>喜欢</span>
<span>收藏</span>
<span>下载</span>
<span>分享</span>
</div>
</div>
</section>
<section class="right-aside aside">
<div class="play-list">
播放列表
</div>
<div id="id-music-play-list" data-cur="0">
<div class="music-info-title">
<span class="music-name">歌曲</span>
<span class="music-duration">时长</span>
<span class="music-singer">歌手</span>
</div>
</div>
</section>
</section>
</main>
<footer>
<section id="id-music-control">
<img id="id-img-pre" src="img/pre2.png" alt="pre">
<img id="id-img-play" src="img/play2.png" alt="paly">
<img id="id-img-next" src="img/next2.png" alt="next">
</section>
<section id="id-music-vol-order">
<img id="id-music-order" data-order="0" src="img/loop.png">
<img src="img/vol.png">
<span class="music-vol vetical"></span>
<span class="music-vol vetical" id="id-music-vol"></span>
<span class="vetical point" id="id-music-vol-point">
<span></span>
</span>
</section>
<section id="id-music-progress">
<section id="id-current-time">
00:00
</section>
<section id="id-duration-time">
00:00
</section>
<section id="id-progress">
<span class="music-progress vetical" id="id-full-progress"></span>
<span class="music-progress vetical" id="id-current-progress"></span>
<span class="vetical point" id="id-music-progress-point">
<span></span>
</span>
</section>
</section>
</footer>
<script src="js/chen.js"></script>
<script src="js/data.js"></script>
<script src="js/slideshow.js"></script>
<script src="js/main.js"></script>
</body>
</html>