0

我有大约 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代码。它出现在 <div id="lrvinyl" >

<div id="player">
            <div id="recordbox">
            <div class="record2">
            </div>
            </div>
            <div class="player-box">
            <div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
 <p class="nprecinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
</div>
<div class="bars-box">
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
                    </div>
<div id="lrvinyl">
                    </div>
                </div>
              </div>
            </div>
<div class="grid_3">
    <div class="album">
    <div class="record">
    </div>

这是小提琴http://jsfiddle.net/7txt3/15/

4

2 回答 2

1

添加rel="path_to_album_image"到每个播放按钮。然后添加脚本：

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

因此，当您按下播放按钮时，小图像会变为播放按钮rel=""属性中定义的图像。 演示

于 2012-10-13T18:22:12.070 回答
0

只需将#lrvinyldiv 的背景图像更改为新图像，如下所示：

$('#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});

观看现场演示

于 2012-10-13T18:16:35.087 回答