JavaScript實(shí)現(xiàn)音樂(lè)自動(dòng)切換和輪播
更新時(shí)間：2017年11月05日 15:12:21 作者：輸出是最好的學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂(lè)自動(dòng)切換和輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言：前兩天有個(gè)同學(xué)問(wèn)我音樂(lè)自動(dòng)切換，并在所有歌曲都播放完成以后實(shí)現(xiàn)循環(huán)播放的效果。自己折騰了一下做了出來(lái)，今天整理桌面的時(shí)候突然看見(jiàn)，在拖到回收站的一瞬間想著還是寫(xiě)一篇博客分享一下。實(shí)現(xiàn)的方法有很多種，我這里簡(jiǎn)單的實(shí)現(xiàn)。
通過(guò)修改video的src（這種應(yīng)該是最好節(jié)省資源的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>welcome</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="left-bar">
<ul>
<li class="music-name">十年</li>
<li class="music-name">朋友</li>
<li class="music-name">勇氣</li>
</ul>
</div>
<div class="content">
<video src="" id="video1" controls autoplay></video>
<button id="btn">按鈕</button>
</div>
<script>
window.onload = function() {
// 歌曲列表
var music = [
{id: 1, name:"十年"},
{id: 2, name:"朋友"},
{id: 3, name:"勇氣"}
]
// 記錄當(dāng)前是哪首歌曲
var currentMusic = 0;
// 獲取DOM
var oVideo1 = document.querySelector("#video1");
// 初始化
oVideo1.src = music[0].name + '.mp3';
// 歌曲結(jié)束事件
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++) {
// 為了知道具體是那一個(gè)li
aList[i].index = i;
// 給每一個(gè)li設(shè)定一個(gè)事件
aList[i].onclick = function() {
oVideo1.src = music[this.index].name + ".mp3";
}
}
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)單三步實(shí)現(xiàn)報(bào)表頁(yè)面集成天氣
本文主要介紹了基于javascript實(shí)現(xiàn)報(bào)表頁(yè)面集成天氣的方法步驟，簡(jiǎn)單三步，一看就懂。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
使用Nginx部署前端項(xiàng)目的詳細(xì)步驟記錄
在實(shí)際開(kāi)發(fā)中我們通常會(huì)使用Nginx來(lái)部署前端靜態(tài)頁(yè)面,以提供快速訪問(wèn)速度和良好的用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于使用Nginx部署前端項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2024-08-08
本文主要介紹了Javascript中的 “&” 和 “|” 的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果
這篇文章主要介紹了js實(shí)現(xiàn)仿微博滾動(dòng)顯示信息的效果,通過(guò)由上往下滾動(dòng)來(lái)實(shí)現(xiàn)不斷顯示微博的，而且每一天新微博都是通過(guò)淡入效果顯示的,需要的朋友可以參考下2015-12-12
JavaScript枚舉選擇jquery插件代碼實(shí)例
這篇文章主要介紹了JavaScript枚舉選擇jquery插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
js實(shí)現(xiàn)單行文本向上滾動(dòng)效果實(shí)例代碼
這篇文章主要介紹了js實(shí)現(xiàn)單行文本向上滾動(dòng)效果,大家參考使用吧2013-11-11
javascript基于HTML5 canvas制作畫(huà)箭頭組件
該組件實(shí)現(xiàn)了根據(jù)箭頭起止點(diǎn)坐標(biāo)畫(huà)箭頭功能。目前組件可設(shè)置箭頭形狀（大小和角度）。2014-06-06
CocosCreator骨骼動(dòng)畫(huà)之龍骨DragonBones
這篇文章主要介紹了怎么在CocosCreator中使用骨骼動(dòng)畫(huà)龍骨DragonBones，對(duì)骨骼動(dòng)畫(huà)感興趣的同學(xué)，可以試一下2021-04-04
微信提示 在瀏覽器打開(kāi) 效果實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信提示 在瀏覽器打開(kāi) 效果實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09