Home > Article > Web Front-end > Tutorial on how to implement automatic music switching and carousel using JavaScript

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

小云云Original: 2018-01-19 14:23:312365browse

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>

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!

JavaScript 架构 jquery 循环 JS consul

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js timer implementation of countdown effect example analysisNext article：js timer implementation of countdown effect example analysis

See more

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

Related articles