- 博客(4)
- 收藏
- 关注
RSS订阅原创 网页制作-音乐播放功能（二）
（2）将歌曲切换到上一首prevSong（）：实现变量currentSong--，然后调用updateSongInfo(currentSong)更新相关信息。（1）用来更新歌曲信息的函数updateSongInfo(index)：通过函数传入的索引值，更新歌曲名字、歌手姓名、音乐图片。<audio src="./audio/起风了-权三岁.mp3" id="domMusic"></audio>2.同时实现音乐条上歌曲信息的更新。（3）将歌曲切换到下一首nextSong（）:与prevSong（）同理。
2024-07-31 16:28:13
180
原创 网页设计-音乐播放功能
（1）startPlay()：首先实现进度条的移动，我们需要获取进度条容器的宽度，然后根据音乐播放的时间（domMusic.currentTime）和音乐总时长（domMusic.duration）的百分比，可以计算出红色进度条的宽度。通过第二点可以知道，我们需要定义三个主要的函数：play()函数检测音乐播放状态，判断点击按钮时，音乐是播放还是暂停；startPlay()函数实现音乐开始播放，获取音乐播放的实时位置，更新红色进度条和小圆点的位置以及音乐播放时间，以及播放结束时回到初始位置；
2024-07-31 16:24:09
409
原创 无缝轮播-仿网易云音乐页面制作
这样做的目地是:当向左滑动时（假设4张图片的宽度是100px，初始位置为left=-400px，），可看见的图片是5 6 7 8，此时我们将left的值改成400px，虽然left改变了，但是用户看到的仍然是5 6 7 8四张图片，向右滑动同理，这样就可以实现这8张图片的无线轮播。上述的图片转换时瞬间的，如果要实现图片向滑动的效果，需要用setInterval函数，每隔一定时间执行left++或left--的操作，加减的数值和执行setInterval函数的间隔绝对了图片滑动的速度。
2024-07-31 16:19:46
252
原创 轮播图制作-仿网易云音乐
4.实现左右翻页：对点击按钮添加事件监听器，当点击翻页按钮时，通过对currentIndex加一减一操作实现图片的左右翻页效果，需要注意的是当currentIndex等于图片数量时，要执行currentIndex等于0操作，当currentIndex等于0时，要执行currentIndex等于图片数量减一的操作，以此实现图片的循环播放。3.实现自动播放：通过currentIndex++来实现遍历每一张图片，当currentIndex等于图片数量时，要将currentIndex设置成0，重新进入遍历。
2024-07-29 17:23:18
197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人