我做了個隨機播放，然後要做循壞遍歷異步返回的歌曲數據時候，本來是要做的效果是點擊左右按鈕可以播放上一首和下一首，但是結果是點擊左邊按鈕直接播放第一首，而點擊右按鈕的時候直接就播放了最後一首，誰幫忙給個解決思路，代碼如下
<code>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
body{
background:deepskyblue;
}
.container{
margin-top:150px;
}
a{
color: #000;
}
span{
font-size: 2.5em;
}
.music{
border:1px #ddd dashed;
}
.info li{
color: red;
}
.list{
border: 1px dashed #ddd;
}
.time-bar{
width: 0;
height: 5px;
background: yellow;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 col-xs-8">
<div class="logo"><img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img/bg.jpg" alt=""></div>
<div class="music text-center">
<audio id="audio" src="res/TakeMeToYourHeart.mp3" loop="loop" autoplay></audio>
<ul class="list-inline list-unstyled info">
<li>
<li>
</ul>
<ul class="list-unstyled list-inline control">
<li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-play"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
</ul>
<div class="time-bar"></div>
</div>
</div>
<div class="col-xs-4">
<ul class="list-unstyled list text-center">
<h1 id="歌单">歌单</h1>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
//加载页面的播放器动画
// setTimeout(function(){
// $('.row').toggle('pulsate');
// console.log('aa');
// },1000);
document.getElementById("audio").setAttribute('loop','loop');//循环歌曲
//异步请求数据库歌曲数据
$(document).ready(function(){
$.getJSON('musicList.php',function(data){
console.log(data);
var playList=data;
doResponse(playList);
})
}
);
//测试数据
// var playList=[{'player':'薛之谦','music':'来日方长'},
// {'player':'薛之谦','music':'一半.mp3'},
// {"player":'邓紫棋','music':'喜欢你.mp3'}];
function doResponse(playList) {
for (var i = 0; i < playList.length; i++) {
$('.list-unstyled.list').append('<li>' + playList[i].player + playList[i].music + '')
};
var str = $('#audio')[0].getAttribute('src').split('res/');
console.log(str);
$('.info li:first-child')[0].innerHTML = str[1].split('.mp3')[0].split('.');
$('.music ul li a').click(function (e) {
e.preventDefault();
var index = $(this).parent().index();
var x=parseInt(Math.random()*(playList.length-1));
console.log(x);
if (index == 0) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
console.log(i);
} else if (index == 1) {
if ($('#audio')[0].paused) {
$('#audio')[0].play();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-play'
} else {
$('#audio')[0].pause();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-stop'
}
//console.log(index);
} else if(index==2) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
}
//console.log(parseFloat($('#audio')[0].duration))
});
}
</script>
</code>
回覆內容：
我做了個隨機播放，然後要做循壞遍歷異步返回的歌曲數據時候，本來是要做的效果是點擊左右按鈕可以播放上一首和下一首，但是結果是點擊左邊按鈕直接播放第一首，而點擊右按鈕的時候直接就播放了最後一首，誰幫忙給個解決思路，代碼如下
<code>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
body{
background:deepskyblue;
}
.container{
margin-top:150px;
}
a{
color: #000;
}
span{
font-size: 2.5em;
}
.music{
border:1px #ddd dashed;
}
.info li{
color: red;
}
.list{
border: 1px dashed #ddd;
}
.time-bar{
width: 0;
height: 5px;
background: yellow;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 col-xs-8">
<div class="logo"><img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img/bg.jpg" alt=""></div>
<div class="music text-center">
<audio id="audio" src="res/TakeMeToYourHeart.mp3" loop="loop" autoplay></audio>
<ul class="list-inline list-unstyled info">
<li>
<li>
</ul>
<ul class="list-unstyled list-inline control">
<li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-play"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li>
</ul>
<div class="time-bar"></div>
</div>
</div>
<div class="col-xs-4">
<ul class="list-unstyled list text-center">
<h1 id="歌单">歌单</h1>
</ul>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
//加载页面的播放器动画
// setTimeout(function(){
// $('.row').toggle('pulsate');
// console.log('aa');
// },1000);
document.getElementById("audio").setAttribute('loop','loop');//循环歌曲
//异步请求数据库歌曲数据
$(document).ready(function(){
$.getJSON('musicList.php',function(data){
console.log(data);
var playList=data;
doResponse(playList);
})
}
);
//测试数据
// var playList=[{'player':'薛之谦','music':'来日方长'},
// {'player':'薛之谦','music':'一半.mp3'},
// {"player":'邓紫棋','music':'喜欢你.mp3'}];
function doResponse(playList) {
for (var i = 0; i < playList.length; i++) {
$('.list-unstyled.list').append('<li>' + playList[i].player + playList[i].music + '')
};
var str = $('#audio')[0].getAttribute('src').split('res/');
console.log(str);
$('.info li:first-child')[0].innerHTML = str[1].split('.mp3')[0].split('.');
$('.music ul li a').click(function (e) {
e.preventDefault();
var index = $(this).parent().index();
var x=parseInt(Math.random()*(playList.length-1));
console.log(x);
if (index == 0) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
console.log(i);
} else if (index == 1) {
if ($('#audio')[0].paused) {
$('#audio')[0].play();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-play'
} else {
$('#audio')[0].pause();
$('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-stop'
}
//console.log(index);
} else if(index==2) {
$('audio').attr('src', 'res/' + playList[x].music);
$('.info li:first-child')[0].innerHTML = playList[x].player;
$('.info li:last-child')[0].innerHTML = playList[x].music.split('.mp3')[0].split('.');
console.log(index);
}
//console.log(parseFloat($('#audio')[0].duration))
});
}
</script>
</code>陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前ByDDD
熱工具
Dreamweaver CS6
視覺化網頁開發工具
WebStorm Mac版
好用的JavaScript開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
