需要一些javascript显示图像和播放歌曲的同时

我想知道如何在一个div中显示一个与播放列表中播放的歌曲相对应的图像。现在我只有图像显示，如果该人确实点击了一首歌曲，但我希望它显示的图像时，代码从一首歌曲自动切换到下一首歌曲。我不知道如何做到这一点，因为我对jquery非常陌生，这里是相关的代码片段

这只是播放列表的一个片段：

<li>
  <a href="audio/02.mp3"onclick="changeImg('audio/2.jpg');" >
    Above All - Michael W. Smith
  </a>
</li>

这就是所使用的脚本（顺便说一下，我确信可以用一种非常大的方式进行压缩-但我还没有尝试过这样做

<script>
$(document).ready(function () {
  init();
  function init(){
    var current = 0;
    var audio = $('#audio');
    var playlist = $('#playlist');
    var tracks = playlist.find('li a');
    var len = tracks.length - 1;
    var imghol = document.getElementById("imageHolder");
    audio[0].volume = .10;
    audio[0].play();
    playlist.on('click','a', function(e){
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
      current++;
      if(current == len){
        current = 0;
        link = playlist.find('a')[0];
      }else{
        link = playlist.find('a')[current];    
      }
      run($(link),audio[0]);
    });
  }
  function run(link, player){
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    player.load();
    player.play();
  }
});
</script>

<script type="text/javascript">
  function changeImg(image){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
}
</script>    

$（文档）.ready（函数（）{
init（）；
函数init（）{
无功电流=0；
var audio=$（“#audio”）；
var playlist=$（“#playlist”）；
var tracks=playlist.find（'li a'）；
var len=轨道长度-1；
var imghol=document.getElementById（“imageHolder”）；
音频[0]。音量=.10；
音频[0]。播放（）；
播放列表上（'点击'，'a'，功能（e）{
e、 预防默认值（）；
link=$（此项）；
当前=link.parent（）.index（）；
运行（链接，音频[0]）；
});
音频[0]。addEventListener（'ended'，函数（e）{
电流++；
如果（当前==len）{
电流=0；
link=playlist.find（'a'）[0]；
}否则{
link=playlist.find（'a'）[当前]；
}
运行（$（链接），音频[0]）；
});
}
功能运行（链接、播放器）{
player.src=link.attr（'href'）；
PAL= Loop.Prand（）；
PAR.AdC类（Actudio）.sibLeg（）.RevEvCLAS（“Actudio”）；
player.load（）；
player.play（）；
}
});
功能更改img（图像）{
var imghol=document.getElementById（“imageHolder”）；
imghol.src=图像；
}

到目前为止，一切都很好，但正如我所说，我希望当歌曲自动播放不同的歌曲时，与歌曲对应的图像自动切换到另一个图像

图像显示方法取自此网站，在该网站上，其他人询问如何在单击列表项时显示图像，我调整了答案以适合我需要显示的内容，但无法找到使其自动显示的方法

谢谢：）

下面的代码完全未经测试请参见下面的编辑。
我在那里重新订了东西

请从

更改标记

只有4个错误需要修复。第一个是我建议的代码

在
run（）
函数中，
imghol.src=href应该是
imghol.attr（“src”，href）
因为
imghol
是jQuery对象

其他错误都是你的

href=href.replace（“audio/02.mp3”、“audio/02.jpg”）
此行用于捕获
href
中的文件名，但扩展名已更改（从
.mp3
到
.jpg
）。我的建议是正确的。它必须是
href=href.replace（“.mp3”，“.jpg”）

将
更改为
。这个函数已经不存在了
删除
音频[0]。播放（）来自
init（）
函数。你还不想玩任何东西。。。没有可播放的文件
现在一些建议：

不要使用jqueryslim！对于您实际拥有的代码，这没关系。但是，一旦您尝试将动画（如
fadeIn（）
）添加到图像中。。。这行不通。这与完整版本相同，不包括动画、Ajax和更有用的东西。这是唯一好的表现是重要的。但是如果没有jQuery所提供的一切。。。最好只使用普通JavaScript！如果您尝试jQuery，请使用完整的库

并使用。调试脚本的所有提示都在那里供您查看。
好的，我发现有几个地方需要重做和清理-对于初学者来说，只要单击函数调用图像更改，图像就不会显示。我想在继续之前，我真的需要坐下来，更加努力地理解现有的代码——我想感谢所有看过这个问题的人！我会回来的，如果我做了一些清洁工作后，我仍然有问题-大家晚安：）啊，啊，啊…我刚刚发布了我看到一些需要做的清洁工作，然后我看到了你的答案！好家伙！我想感谢你的帮助，我会尝试一下：）卢伊斯-对不起，我不太清楚我想要什么。让我再试一次。我有一个mp3播放器，并使用无序列表创建了一个播放列表。我想让它做的是：当人们点击列表中的歌曲时，我想让它播放歌曲，并在一个div中显示一个图像，该div位于div旁边，播放器在其中，这是他们点击的歌曲歌词的图像。单击功能非常有效。他们单击，歌曲播放，与该歌曲相关的图像显示。但我也有这个播放器设置，可以自动播放列表中的下一首歌曲，这就是我未受教育的问题暴露出来的地方！当它自动播放列表中的下一首歌曲时，我还希望图像显示与自动播放的歌曲对应的歌曲。很好的回答Louys！：）-我有它在测试服务器上工作得很好，它是好的，顺利，真棒！我确实将你编辑的帖子标记为+1，但它告诉我我不到15分？！哦，我需要积分！！！无论如何，再次感谢-我正在寻找并采纳你的其他建议，从身体标签中取出预载，等等，：）是的，从你的帖子开始-我一直在看控制台，它帮了我很大的忙！尽管这需要一些习惯
<script>
$(document).ready(function () {
  var current = 0;
  var audio = $('#audio');
  var playlist = $('#playlist');
  var tracks = playlist.find('li a');
  var len = tracks.length - 1;
  var imghol = $("#imageHolder");

  function init(){
    audio[0].volume = .10;
    //audio[0].play();
  }
  init();

  // Your click handler
  playlist.on('click','a', function(e){
    e.preventDefault();
    link = $(this);
    current = link.parent().index();
    run(link, audio[0]);
  });

  // Audio end event handler
  audio.on('ended',function(e){
    current++;
    if(current == len){
      current = 0;
      link = playlist.find('a')[0];
    }else{
      link = playlist.find('a')[current];    
    }
    run($(link),audio[0]);
  });

  // Run function
  function run(link, player){
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    player.load();
    player.play();

    // The image change is here
    href = link.attr("href");
    href = href.replace(".mp3",".jpg");   // changes .mp3 for .jpg ADJUST your file naming
    //imghol.src = href;
    imghol.attr("src",href);
  }

}); // ready
</script>