JS는 음악 전환과 재생을 차례로 구현합니다.

이번에는 음악 전환 재생 및 회전 재생을 구현하는 JS를 소개하겠습니다. JS를 사용하여 음악 전환 재생 및 회전 재생을 구현하는 경우 다음은 실제 사례입니다.

nbsp;html>


 <meta>
 <title>welcome</title>
 <style>
  .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>


<p>
 </p>

  
• 十年
  
• 朋友
  
• 勇气
 

   按钮

<script> 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 + &#39;.mp3&#39;; // 歌曲结束事件 oVideo1.onended = function() { currentMusic += 1; // 判断是否是最后一首 if(currentMusic === music.length) { currentMusic = 0; } var sr = music[currentMusic].name + &#39;.mp3&#39;; 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"; } } } </script> 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 JS는 음악 전환과 재생을 차례로 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!