- 博客(4)
- 收藏
- 关注
原创 网页制作-音乐播放功能(二)
(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关注的人