Javascript 当用户在不同的电台/相册上单击播放时，我希望有一个小的封面图像更改

我有大约24张带有悬停的大型封面图片，上面显示了电台信息和播放按钮。当用户单击播放按钮时，“播放器”将更改信息以匹配用户单击的内容

目前，我在“玩家”中有一个较小的封面图像，它不会改变以匹配较大的版本

我希望播放器中的小封面图像也能像用户单击“播放”时的电台名称和电台信息一样进行更改，以便与较大的图像匹配

这是我到目前为止的剧本。我还没有在脚本中更改封面图像，因为这就是我试图弄清楚如何链接小图像的原因，因为目前我只有一个，它在css中链接，我还有大约23个其他的

$(function(){
var station = $('.player-station'),
    record = $('.record2:first'),
    playBtns = $('.play'),
    info = $('.nprecinfo');

playBtns.click(function()
{
    var btn = $(this);
    if(btn.text() == 'STOP')
    {
        btn.text('PLAY');
        record.css({'-webkit-animation-play-state': 'paused',
                    '-moz-animation-play-state': 'paused'});
        return;
    }

    playBtns.text('PLAY');
    var album = btn.closest('.album');
    station.text(album.find('h3').text());
    info.text(album.find('.recordinfo').text());
    record.css({'-webkit-animation-play-state': 'running',
                '-moz-animation-play-state': 'running'});
    btn.text('STOP');
});
});

下面是带有小封面图像的html代码。它出现在

现在播放：
Groove沙拉
由环境/节奏节奏节奏和凹槽组成的冷却板

---

这是小提琴

只需将

#lr

div的背景图像更改为新图像，如下所示：

$('#lrvinyl').css({'background-image':'url(http://benlevywebdesign.com/somafm/images/lush.png)'});

看到工作了吗

更新：
现在，这是动态更改图像的代码，无需像我以前的代码那样对其进行硬编码，请检查：

var im = $(this).parent().next('div').css('background-image');
$('#lrvinyl').css({'background-image':im});

请参见live

向每个播放按钮添加

rel=“path\u to\u album\u image”

。 然后添加脚本：

$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");

因此，当您按下播放按钮时，小图像将更改为播放按钮

rel=”“

属性中定义的图像。

---

你到底想在你发布的小提琴中实现什么？@Nelson我希望小封面图像能够像电台名称和电台信息一样进行更改，以便在用户单击play时与大图像匹配。我是这样做的，使用jQuery.css并添加

rel=“path_to_image”

播放按钮链接。这就是你要找的吗？我看不到电台信息和电台名称在任何时候都不会改变。。它们看起来是静止的。。此外，封面小图片已经匹配大封面图片，也就是说，小图片是大图片的缩略图，请进一步澄清，并检查您发布的小提琴是否就是您所说的…@wzazza这不完全是我想要的。我想在“播放器”中的小封面图像改变，就像电台的其他信息一样。你刚刚制作了一张像唱片一样旋转的图像：P@benlevywebdesign我已经用新的代码更新了我的答案，我认为这是你想要的，图像url是自动检索的，而不是硬编码的。几乎没有使用较小的图像

$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");