Tutorial on how to implement automatic music switching and carousel using JavaScript-JS Tutorial-php.cn

Tutorial on how to implement automatic music switching and carousel using JavaScript

小云云

Release： 2018-01-19 14:23:31

Original

2361 people have browsed it

This article mainly introduces JavaScript to realize automatic music switching and carousel effects in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Preface: Two days ago, a classmate asked me to automatically switch music and achieve the effect of looping after all songs are played. I made it after some fiddling with it. I suddenly saw it when I was cleaning up my desktop today. As I dragged it to the recycle bin, I thought I might as well write a blog to share it. There are many ways to implement it, I will implement it simply here.

By modifying the src of the video (this should be the best way to save resources)

<!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>
<p class="left-bar">
 <ul>
  <li class="music-name">十年</li>
  <li class="music-name">朋友</li>
  <li class="music-name">勇气</li>
 </ul>
</p>
<p class="content">
 <video src="" id="video1" controls autoplay></video>
 <button id="btn">按钮</button>
</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>

</body>
</html>

Copy after login

Related recommendations:

Detailed explanation of MHA automatic switching example of consul architecture

Using JS to implement automatic switching of images after clicking a button

JQuery simple and practical carousel Device implementation method

The above is the detailed content of Tutorial on how to implement automatic music switching and carousel using JavaScript. For more information, please follow other related articles on the PHP Chinese website!