效果见右上角：展示页面：http://xyy9.gitee.io/roll/

鼠标移入可展开歌单和歌曲封面信息

默认选中第一首，点击碟片进行播放，底下图片切换至对应图片，播放时，碟片进行旋转，唱针不动，点击歌曲名字进行重播。

源码如下：

html

<!--==========黑胶碟片旋转=========--><div id="songstatus"><div id="songstatus_pic" onclick="control(songNum)"><img src="img/music_disc.png" id="status_pic"><!--黑胶唱片--><img src="img/discpointer.png" id="discpointer_pic"><!--指针--></div><div id="songslist"><li id="songName1" style="margin-top: 20px;"><span onclick="start(1)">I'm in love</span><audio src="music/I'm%20in%20love.mp3" preload loop id="music1" class="music"></audio></li><li id="songName2"><span onclick="start(2)">千与千寻</span><audio src="music/千与千寻.mp3" preload loop id="music2" class="music"></audio></li><li id="songName3"><span onclick="start(3)">余生相</span><audio src="music/余生相.mp3" preload loop id="music3" class="music"></audio></li><div id="playStatus"><img src="img/songCover0.png" id="songCover"></div></div></div>

music_disc.css

#songstatus{width: 200px;height: 80px;position: fixed;right: 0px;top: 0px;padding-top: 5px;z-index: 1000;transition: 0.5s;}#status_pic{width: 80px;height: 80px;position: fixed;right: 50px;top: 5px;border-radius:100%;transition: 0.5s;z-index: 1;}#discpointer_pic{width: 50px;height: 40px;position: fixed;right: 75px;top: 5px;transition: 0.5s;z-index: 1;}#songstatus:hover{background-color: white;}#songstatus:hover #status_pic{width: 100px;height: 100px;}#songstatus:hover #discpointer_pic{width: 80px;height: 70px;}#songstatus:hover #playStatus{display: block;}#songstatus:hover #songslist{width: 200px;opacity: 1;}#songslist{background-color: white;width: 0px;height: 100%;position: fixed;right: 0px;top: 85px;opacity: 0;transition: 0.5s;}#songslist li{line-height: 50px;text-align: center;}#songslist li span{font-size: 20px;color: black;}#songName1{border-right:5px solid orangered;font-weight:bold;background-color: #F7F7F7;}#playStatus{width: 200px;height: 100px;right: 0px;bottom: 0px;position: fixed;display: none;}#songCover{width: 150px;height: 150px;right: 25px;bottom: 50px;position: fixed;box-shadow: 5px 5px 5px 5px #E5DFD3;}

musicPlayer.js

var rotateVal = 0; var InterVal; var isplay = 0;var songNum = 1;function control(num) {var audio = document.getElementById('music'+num); if(audio!==null){if(audio.paused){audio.play();rotate();}else{audio.pause();clearInterval(InterVal);}} }function rotate () {InterVal = setInterval(function () {var img = document.getElementById('status_pic');rotateVal += 7;img.style.transform = 'rotate(' + rotateVal + 'deg)';img.style.transition = '0.1s linear';}, 100)}function start(num){var max = 3;var audio;var name;songNum = num;for(var i=1;i<=max;i++){audio = document.getElementById('music'+i);audio.currentTime = 0;audio.pause();name = document.getElementById('songName'+i);name.style.borderRight = '0px solid orangered';name.style.fontWeight = 'normal';name.style.backgroundColor = 'white';if(i == num){audio.play();name.style.borderRight = '5px solid orangered';name.style.fontWeight = 'bold';name.style.backgroundColor = '#F7F7F7';document.getElementById('songCover').src = 'img/songCover'+num+'.png';}}clearInterval(InterVal);rotate();}

网站源码：/xyy9/roll

图片：

碟片

/xyy9/roll/blob/master/img/music_disc.png

唱针

/xyy9/roll/blob/master/img/discpointer.png