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

Home

Web Front-end

JS Tutorial

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

Jan 19, 2018 pm 02:23 PM

javascript js switch

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)

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;welcome&lt;/title&gt;
 &lt;style type=&quot;text/css&quot;&gt;
  .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;
  }
 &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p class=&quot;left-bar&quot;&gt;
 &lt;ul&gt;
  &lt;li class=&quot;music-name&quot;&gt;十年&lt;/li&gt;
  &lt;li class=&quot;music-name&quot;&gt;朋友&lt;/li&gt;
  &lt;li class=&quot;music-name&quot;&gt;勇气&lt;/li&gt;
 &lt;/ul&gt;
&lt;/p&gt;
&lt;p class=&quot;content&quot;&gt;
 &lt;video src=&quot;&quot; id=&quot;video1&quot; controls autoplay&gt;&lt;/video&gt;
 &lt;button id=&quot;btn&quot;&gt;按钮&lt;/button&gt;
&lt;/p&gt;

&lt;script&gt;
 window.onload = function() {
  // 歌曲列表
  var music = [
   {id: 1, name:&quot;十年&quot;},
   {id: 2, name:&quot;朋友&quot;},
   {id: 3, name:&quot;勇气&quot;}
  ]
  // 记录当前是哪首歌曲
  var currentMusic = 0;
  // 获取DOM
  var oVideo1 = document.querySelector(&quot;#video1&quot;);
  // 初始化
  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(&quot;music-name&quot;);
  for(var i=0; i&lt;aList.length; i++) {
   // 为了知道具体是那一个li
   aList[i].index = i;
   // 给每一个li设定一个事件
   aList[i].onclick = function() {
    oVideo1.src = music[this.index].name + &quot;.mp3&quot;;
   }
  }
 }
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

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!

Statement of this Website

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

Hot Article

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot tools Tags

Code&IT

Voice

Business

Marketing

AI Detector

Chatbot

Design&Art

Hot Article

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

Hot Article Tags

Hot Topics

Where is the login entrance for gmail email?

7280

Java Tutorial

1622

CakePHP Tutorial

1340

Laravel Tutorial

1257

PHP Tutorial

1205

Related knowledge

Operation tutorial for switching from win11 home version to professional version_Operation tutorial for switching from win11 home version to professional version Mar 20, 2024 pm 01:58 PM

Operation tutorial for switching from win11 home version to professional version_Operation tutorial for switching from win11 home version to professional version