Question

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

我没有必要全屏，所以我将高度设置为475px，我也不需要滑块控件（虽然启用了键盘导航）。

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

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

过去的这一天，我已经难倒了，我会永远感激任何解决方案。

我很惊讶没有其他全宽滑块可以做我正在寻找的东西。

提前致谢，史蒂芬

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：链接变得无法点击。

简单的确认方式：右键单击 - ＆gt;检查元素让你加入#sliderContainer而不是img。

修复：

对于z-index，

而不是-999，-30，-20和-10，使用类似10,20,30,40（相同顺序）的内容

修改：
使用负z-index的原因是因为这个插件是为了制作页面范围的背景（即，将您的图像放在所有内容之下）。

你的滑块也很令人沮丧：你必须等到右图像加载点击链接（4个图像滑动，1个带链接）。我建议您将链接放在所有图像上，或添加一种在图像之间导航的方法。

Answer 2

还可以在index.html中更改z-index值。

<!--Thumbnail Navigation-->
        <div id="prevthumb" style="z-index: 20;"></div>
        <div id="nextthumb" style="z-index: 20;"></div>

        <!--Arrow Navigation-->
        <a id="prevslide" class="load-item" style="z-index: 20;"></a> <a id="nextslide"
            class="load-item" style="z-index: 20;"></a>


        <!--        <div id="thumb-tray" class="load-item"> -->
        <!--            <div id="thumb-back"></div> -->
        <!--            <div id="thumb-forward"></div> -->
        <!--        </div> -->

        <!--Time Bar-->
        <!--        <div id="progress-back" class="load-item"> -->
        <!--            <div id="progress-bar"></div> -->
        <!--        </div> -->

        <!--Control Bar-->
        <!--        <div id="controls-wrapper" class="load-item">  -->
        <!--            <div id="controls">  -->

        <!--                <a id="play-button"><img id="pauseplay" src="jquery/img/pause.png" /> </a>  -->

        <!--Slide counter-->
        <!--                <div id="slidecounter">  -->
        <!--                    <span class="slidenumber"></span> / <span class="totalslides"></span>  -->
        <!--                </div> -->

        <!--Slide captions displayed here-->
        <!--            <div id="slidecaption"></div> -->

                <div id="slidecaption" style="z-index: 20;"></div>


        <!--Thumb Tray button-->
        <!--                <a id="tray-button"><img id="tray-arrow" -->
        <!--                    src="jquery/img/button-tray-up.png" /> </a> -->

        <!--Navigation-->
        <!--                <ul id="slide-list"></ul> -->

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

当您使用此可能性进行编辑时，图像链接正常工作！所以你不必改变css文件中的内容。

全宽jquery幻灯片链接无法正常工作

2 个答案: