使用图像库淡出淡出问题

我在WordPress中使用图像库，图像从数据库中提取并显示在前端。

在我的情况下，一个大图像容器和三个图像缩略图，

我想，当我点击图像的缩略图时，容器中的前一个图像淡出并单击图像设置到图像容器中。

我的Html标记

使用jQuery

  if(jQuery('.homepage-poster').length > 0){ // since this will return a empty var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src'); var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel'); var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1'); jQuery('.wl-poster img').attr('src',final_src); jQuery('.wl-poster a').attr('href',href_path ); } jQuery('#posterlist .poster-thumb img').click(function(){ var href_path = jQuery(this).attr('rel'); var img_src = jQuery(this).attr('src'); var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1'); jQuery('#poster-main-image').remove(function() { jQuery('a#wl-poster-link').attr('href',href_path); jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow'); // $('#img1').fadeOut('slow').remove(); // $('#img1').fadeOut('slow').fadeIn('slow'); }); }); 

请帮我解决这个问题。

Answer 1

尝试使用此代码：

 jQuery('#wl-poster-link').attr('href', href_path); jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src); //wait till image has loaded, you could think about a loading-gif laying above your image-container.. jQuery('#loading').show(); //or fadeIn jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); }); 

你在链接上添加了太多点。 此外，不需要删除function。

你在href的＃wl-poster-link上忘记了一个开头。修复此问题。