本文主要为大家详细介绍了javascript实现音乐自动切换和轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
前言：前两天有个同学问我音乐自动切换，并在所有歌曲都播放完成以后实现循环播放的效果。自己折腾了一下做了出来，今天整理桌面的时候突然看见，在拖到回收站的一瞬间想着还是写一篇博客分享一下。实现的方法有很多种，我这里简单的实现。
通过修改video的src（这种应该是最好节省资源的）
nbsp;html>welcome .content { width: 600px; margin:0 auto; border:1px solid red; } .left-bar { width: 300px; height: 200px; float: left; border:1px solid red; } ul li { list-style: none; margin-top: 20px; cursor: pointer; } li:hover { color: orange; }
登录后复制 十年 朋友 勇气
window.onload = function() { // 歌曲列表 var music = [ {id: 1, name:”十年”}, {id: 2, name:”朋友”}, {id: 3, name:”勇气”} ] // 记录当前是哪首歌曲 var currentMusic = 0; // 获取DOM var oVideo1 = document.querySelector(“#video1”); // 初始化 oVideo1.src = music[0].name + '.mp3'; // 歌曲结束事件 oVideo1.onended = function() { currentMusic += 1; // 判断是否是最后一首 if(currentMusic === music.length) { currentMusic = 0; } var sr = music[currentMusic].name + '.mp3'; this.src=sr; } // 获取左边歌曲列表的DOM var aList = document.getElementsByClassName(“music-name”); for(var i=0; i<aList.length; i++) { // 为了知道具体是那一个li aList[i].index = i; // 给每一个li设定一个事件 aList[i].onclick = function() { oVideo1.src = music[this.index].name + ".mp3"; } } }
相关推荐：
consul架构的 MHA 自动切换实例详解
立即学习“Java免费学习笔记（深入）”；
利用JS实现点击按钮后图片自动切换的简单方法
jQuery简单实用的轮播器实现方法
以上就是JavaScript实现音乐自动切换和轮播实例教程的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2790441.html
