javascript - 幻灯片 - 将幻灯片链接到 URL 仅适用于最后一张幻灯片

Question

我正在使用精益 slider :http://dev7studios.com/lean-slider/

我想将每张幻灯片链接到不同的 url。我注意到只有最后一张幻灯片中的代码被执行(并且也应用于所有其他幻灯片)。例如，仅在最后一张幻灯片上向 google 添加标签会导致所有幻灯片都链接到 google。不知何故，它只能看到最后一张幻灯片 - 如果您检查幻灯片上的元素，您会看到它始终突出显示最后一张幻灯片的代码。

编辑: 我还注意到，当您不包含 sample-style.css 文件时它工作正常。但如果没有这个，就没有淡入淡出/过渡效果，导航按钮也没有格式化，所以没有这个文件就毫无意义，但问题可能出在 slider 的工作方式上。

关于导致此问题的原因或解决方法的任何想法？

唯一改变的是每张幻灯片都添加了链接。 (index.html)

...
        <div id="slider">
            <div class="slide">
                <a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
            </div>
            <div class="slide2">
                <a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
            </div>
            <div class="slide3">
                <a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
            </div>
            <div class="slide4">
                <a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
            </div>
        </div>
...

Answer 1

我刚刚弄明白了。您应该在这三个地方编辑 z-index 属性:

.lean-slider-slide.current {
    z-index: 1;
}

#slider-direction-nav {
    z-index: 2;
}

#slider-control-nav {
    z-index: 2;
}

您可以在下载 Lean Slider 时在 slider.css 和 sample-style.css 中找到它。