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

【问题标题】：Slideshow - link slide to URL only working for last slide幻灯片 - 将幻灯片链接到仅适用于最后一张幻灯片的 URL
【发布时间】：2013-08-29 00:21:19
【问题描述】：

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

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

编辑：我还注意到，当您不包含 sample-style.css 文件时它可以正常工作。但是没有这个，就没有淡入淡出/过渡效果，导航按钮也没有格式化，所以没有这个文件就没有意义了，但问题可能在于滑块的工作原理。

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

唯一改变了 - 为每张幻灯片添加了链接。 (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>
...

【问题讨论】：

您必须提供您正在使用的代码，以便我们能够并愿意提供帮助。
代码几乎就是滑块下载中的文件。这就是我没有包含它的原因，它太多了，我什至不知道是哪个部分导致它，尽管我怀疑它是 javascript。
在您添加链接的位置发布标记

标签： javascript jquery html slideshow

【解决方案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 中找到它。

【讨论】：

不知道你是怎么想出来的，但这太棒了！整天都在努力寻找解决这个问题的方法。为你 +1。
将近一年后..非常感谢！ :D

【解决方案2】：

看看这个 EXAMPLE，即使使用外部资源，它也能完美运行。

你需要确保你拥有的东西：

1.包含 jQuery 库（必须在lea-slider.js 之前包含 jQuery）

2.包含lean-slider.js

3.包含lean-slider.css

4.确保您的图像上有一个 auto_increment 类（slider1、slider2、slider3 等）

在所有这些（不是之前）下面添加这个：

$(document).ready(function() {
    $('#slider').leanSlider();
});

并确保包含您的图像的 div 具有 ID id="slider"

【讨论】：

您的示例不包括我必须开始的问题的链接。此外，您没有用于格式化导航功能的 sample-styles.css，添加后，您将看到我在帖子中提到的错误。（我有你列出的所有东西，在原始代码中已经是这样了，除了添加链接之外我没有更改。）
您从未提及有关 sample-styles.css 的任何内容，这是在您编辑帖子后包含在内的...如果您没有在初始帖子中包含所有内容，我们就无法猜测您是什么正在努力实现或您的问题可能是什么。当您包含导航控件时，精益滑块与不透明度一起使用。这使您的链接成为另一个之上的 1，这只是最后 1 个工作，因为它是最后加载的 - 它位于其他链接之上。如果您希望您的图像是链接并具有图像导航控件，您可以尝试 Nivo-slider，否则您将需要进行大量自定义
好的，感谢您的解释，这就是我无法弄清楚的 - 为什么它位于顶部。至于sample-styles.css，我后来加进去的，因为我发帖后才发现的，所以我正在更新我的发现。

【解决方案3】：

总是取最后一个链接；使用 css 你可以强制元素的位置并为每个图像启用链接：

/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
 z-index:3;
}

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

.lean-slider-slide.current a
{
 float:left;
}

【讨论】：