Question

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

使用JQuery Cycle插件创建图片库，该插件显示带标题的图片（取自替代文字）
每张图片都有一个PNG absolutley位于顶部以实现圆角效果

这是我的画廊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;
}

以上不会将alt文本输出到“title”div中。当我移除面具时，它可以工作：

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

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

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

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

为什么附加div / image会使标题无法显示？

谢谢

Answer 1

在代码的第一行，

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

看起来你错过了一个结束/div标签，所以这看起来并不像是在生成一个正确的节点/元素。这可能会导致你的问题？与以下内容比较：

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

祝你好运！
-Mike

Answer 2

this等于div。您需要在alt中获取img的{{1}}属性。

将该行更改为：

div

JQuery循环插件+ PNG叠加+图像替换文本作为标题冲突

2 个答案: