jquery - JQuery 循环插件 + PNG 覆盖 + 图像替代文本作为标题冲突

Question

我正在努力实现以下目标：

• 使用 JQuery Cycle 插件创建一个图片库，显示带有标题的图片（取自 alt 文本）
• 每个图像的顶部都有一个绝对的 PNG，以实现圆角效果

这是我的画廊 HTML：

<div id="slideshow" class="pics">

<div class="photo-container" >
<img src="/path/to/image" alt="alt text as title" />
<img class="mask" src="path/to/mask" />
</div>

</div><!-- /slideshow -->

<div id="title"></div>

这是我的 Jquery 画廊功能：

$(function() {

$('#slideshow').after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span>').cycle({
fx:     'fade',
timeout: 0,
cleartypeNoBg: true,
pager:  '#nav',
next:    '#slideshow',
before: onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
$('#nav a').after('<span>&gt;</span>')   
});
</script>

这是我处理掩码的CSS：

.photo-container {
  position: relative; 
  display: block;
  overflow:hidden;
  border: none;
} 

img.mask {
  position: absolute;
  top: 0;
  left: 0;
  overflow:hidden;
  border: none;
} 

以上不会将替代文本输出到“标题”div中。当我取下面具时，它会起作用：

<div id="slideshow" class="pics">

<img src="/path/to/image" alt="alt text as title" />

</div><!-- /slideshow -->

<div id="title"></div>

任何想法为什么附加的 div / 图像导致标题不显示？

谢谢

Answer 1

In the first line of your code,

$('#slideshow')
    .after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span>')

it looks like you missed a closing /div tag, so this does not look like it is generating a proper node/element. This is perhaps causing your problems? Compare to the following:

$('#slideshow')
    .after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span></div>')

Best of luck!
-Mike

Answer 2

this等于div。您需要alt在img.div

将该行更改为：

$('#title').html($(this).find('img').attr('alt'));