jquery - 全宽 jquery 幻灯片链接不起作用

Question

我已经自定义了 jQuery 幻灯片插件 Supersized(谷歌它，因为我只能发布 2 个链接，下面需要这些链接:-))

我不需要它是全屏的，所以我将高度设置为 475px，我也不需要 slider 控件(尽管启用了键盘导航)。

I have the slider working to a degree - 最后一张幻灯片上有一个链接，可以点击。元素位置固定。

I have the same slider here - CSS 有点不同(不使用固定定位)但链接只是不想让自己知道，即使 Firebug 显示它在那里。

这在过去的一天里一直被难住了，我将永远感激任何解决方案。

我很惊讶没有其他全宽 slider 可以满足我的需求。

提前致谢，史蒂文

Answer 1

你的错误在于那一行:

#supersized a.activeslide {
    z-index: -10;
}

#supersized a {
    background: none repeat scroll 0 0 #111111;
    display: block;
    height: 475px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -30;
}

#supersized {
    height: 475px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: -999;
}

#supersized a.prevslide {
    z-index: -20;
}

z-index 为负，将您的超大内容置于其他内容之下。这就像在链接上放置一个透明的 div:链接变得不可点击。

确认的简单方法:右键单击 -> 检查元素 将您置于#sliderContainer 而不是 img 上。

修复:

使用 10,20,30,40 之类的东西(顺序相同)，而不是 z-index 的 -999、-30、-20 和 -10

编辑:
使用负 z-index 的原因是因为这个插件是用来制作页面范围的背景的(即，将您的图片放在所有内容的下方)。

您的 slider 也相当令人沮丧:您必须等到正确的图像加载才能单击链接(4 个图像滑动，1 个带有链接)。我建议您要么将链接放在所有图像上，要么添加一种在图像之间导航的方法。