我有这个 html5 div 块：
<div id="st_main">
<img src="/artistes/david_merlo/David_Merlo_Solo_PosteaGalene_2011_Ulrike_Monso.jpg" alt="" class="st_preview" style="display:none;" />
<div class="st_overlay"></div>
<ul class="menu">
<li>
<a href="#">Les Artistes</a>
<div class="sc_menu_wrapper">
<div class="sc_menu">
<a href="#" m4v="/artistes/diez/diez_demo.m4a" oga="/artistes/diez/diez_demo.ogg" mp3="/artistes/diez/diez_demo.mp3"><img src="/artistes/david_merlo/david_merlo_thumb.jpg" alt="/artistes/david_merlo/David_Merlo_Solo_PosteaGalene_2011_Ulrike_Monso.jpg"></a>
<a href="#" m4v="/artistes/david_merlo/diez_demo.m4a" oga="/artistes/david_merlo/diez_demo.ogg" mp3="/artistes/david_merlo/diez_demo.mp3"><img src="/artistes/nicolas-dick/L'Embobineuse_avec_phil_niblock.jpg" alt="/artistes/nicolas-dick/concert_glazart_du_25_02.jpg"></a>
<a href="#" m4v="/audio/01_Tribu.m4a" oga="/audio/01_Tribu.ogg" mp3="/audio/01_Tribu.mp3"><img src="/artistes/jean-luc_gergonne/jlgergonne_thumb.jpg" alt="/artistes/jean-luc_gergonne/jlgergonne.jpg"></a>
<a href="#" m4v="/artistes/diez/diez_demo.m4a" oga="/artistes/diez/diez_demo.ogg" mp3="/artistes/diez/diez_demo.mp3"><img src="/artistes/diez/diez_130x195.jpeg" alt="/artistes/diez/diez.jpeg"></a>
</div>
</div>
</li>
</ul>
<div class="zen">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
</div>
我的javascript代码如下：
function tsunamiClient() {
var self = this;
var width = $(".menu").width();
//the ul element
var $list = $('.menu');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//let's load the current image
//and just then display the navigation menu
$('<img>').load(function(){
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
this.init = function() {
self.sliderMenu();
};
// Slider Menu
this.sliderMenu = function() {
/* function to make the thumbs menu scrollable */
//clicking on a thumb, replaces the large image
$list.find('.sc_menu img').bind('click',function(){
var $this = $(this);
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//the loading image
function buildThumbs($elem){
var $wrapper = $elem.next();
var $menu = $wrapper.find('.sc_menu');
var inactiveMargin = 150;
/* move the scroll down to the
beggining (move as much as the height of the menu) */
$wrapper.scrollTop($menu.outerHeight());
/* when moving the mouse up or down, the wrapper moves (scrolls) up or down */
$wrapper.bind('mousemove',function(e){
var wrapperHeight = $wrapper.height();
var menuHeight = $menu.outerHeight() + 2 * inactiveMargin;
var top = (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
$wrapper.scrollTop(top+10);
});
}
var stacktime;
$('.menu li > a').bind('mouseover',function () {
var $this = $(this);
buildThumbs($this);
var pos = $this.next().find('a').size();
var f = function(){
if(pos==0) clearTimeout(stacktime);
$this.next().find('a:nth-child('+pos+')').css('visibility','visible');
--pos;
};
/* each thumb will appear with a delay */
stacktime = setInterval(f , 50);
});
/* on mouseleave of the whole <li> the scrollable area is hidden */
$('.menu li').bind('mouseleave',function () {
var $this = $(this);
clearTimeout(stacktime);
$this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
$this.find('.sc_menu_wrapper').css('visibility','hidden');
});
/* when hovering a thumb, change its opacity */
$('.sc_menu a').hover(
function () {
var $this = $(this);
$this.find('img')
.stop()
.animate({'opacity':'1.0'},400);
},
function () {
var $this = $(this);
$this.find('img')
.stop()
.animate({'opacity':'0.3'},400);
}
);
};
// jPlayer
this.tsunamiPlayer = function(music) {
///init screen
var player = $(".zen .player");
var no_of_tracks = $(".sc_menu a").length;
player.jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: m4a,
mp3: mp,
oga: oga
});
},
swfPath: "/js/jplayer/Jplayer.swf",
supplied: "m4a, mp3, oga"
});
// preload, update, end
player.bind($.jPlayer.event.progress, function(event) {
var audio = $('.zen audio').get(0);
var pc = 0;
if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
pc = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
displayBuffered(pc);
//console.log(pc);
if(pc >= 99) {
//console.log("loaded");
$('.zen .buffer').addClass("loaded");
}
}
});
//player.bind($.jPlayer.event.loadeddata, function(event) {
//$('.zen .buffer').addClass("loaded");
//});
player.bind($.jPlayer.event.timeupdate, function(event) {
var pc = event.jPlayer.status.currentPercentAbsolute;
if (!dragging) {
displayProgress(pc);
}
});
player.bind($.jPlayer.event.ended, function(event) {
$('.zen .circle').removeClass( "rotate" );
$(".zen").removeClass( "play" );
$('.zen .progress').css({rotate: '0deg'});
status = "stop";
});
// play/pause
$(".zen .button").bind('mousedown', function() {
// not sure if this can be done in a simpler way.
// when you click on the edge of the play button, but button scales down and doesn't drigger the click,
// so mouseleave is added to still catch it.
$(this).bind('mouseleave', function() {
$(this).unbind('mouseleave');
onClick();
});
});
$(".zen .button").bind('mouseup', function() {
$(this).unbind('mouseleave');
onClick();
});
function onClick() {
if(status != "play") {
status = "play";
$(".zen").addClass( "play" );
player.jPlayer("play");
} else {
$('.zen .circle').removeClass( "rotate" );
$(".zen").removeClass( "play" );
status = "pause";
player.jPlayer("pause");
}
};
// draggin
var clickControl = $('.zen .drag');
clickControl.grab({
onstart: function(){
dragging = true;
$('.zen .button').css( "pointer-events", "none" );
}, onmove: function(event){
var pc = getArcPc(event.position.x, event.position.y);
player.jPlayer("playHead", pc).jPlayer("play");
displayProgress(pc);
}, onfinish: function(event){
dragging = false;
var pc = getArcPc(event.position.x, event.position.y);
player.jPlayer("playHead", pc).jPlayer("play");
$('.zen .button').css( "pointer-events", "auto" );
}
});
// functions
function displayProgress(pc) {
var degs = pc * 3.6+"deg";
$('.zen .progress').css({rotate: degs});
}
function displayBuffered(pc) {
var degs = pc * 3.6+"deg";
$('.zen .buffer').css({rotate: degs});
}
function getArcPc(pageX, pageY) {
var self = clickControl,
offset = self.offset(),
x = pageX - offset.left - self.width()/2,
y = pageY - offset.top - self.height()/2,
a = Math.atan2(y,x);
if (a > -1*Math.PI && a < -0.5*Math.PI) {
a = 2*Math.PI+a;
}
// a is now value between -0.5PI and 1.5PI
// ready to be normalized and applied
var pc = (a + Math.PI/2) / 2*Math.PI * 10;
return pc;
}
};
// end jPlayer
// Initialise
this.init();
};
var tsunamiClient;
jQuery(function() {
tsunamiClient = new tsunamiClient();
});
这就是我到目前为止所拥有的http://jsfiddle.net/aqoon/VUGL8/
它不起作用，因为我希望能够拥有这样的功能，以便当用户访问页面并且如果他们单击 jPlayer 的播放按钮来播放与正在显示的图像相对应的音乐。同样，如果用户从“sc_menu”中选择图像，这将更新图像中的图像并创建一个新的 jplayer 实例。
我在 $list.find('.sc_menu img').bind('click',function(){ var $this = $(this); 之后添加了这段代码
var link = $this.parent();
var music;
title = link.text();
mp = link.attr("mp3");
oga = link.attr("oga");
m4a = link.attr("m4a");
m4v = link.attr("m4v");
ogv = link.attr("ogv");
webmv = link.attr("webmv");
poster = link.attr("poster");
music = {
title: title,
mp: mp,
oga: oga,
m4a: m4a,
ogv: ogv,
webmv: webmv,
poster: poster,
}
self.tsunamiPlayer(music);
这确实将数据绑定到 jplayer 但是当我更改图像时它不会更新。
关于使这项工作的任何建议，以便：
在页面显示初始 jplayer 加载与艺术家图像对应的音乐文件
当用户单击菜单中的缩略图时，jplayer 音乐文件会相应更新。
任何指针都非常感谢。