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

我使用的是倾斜滑块：

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

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

你知道是什么原因造成的，或者如何修复吗

唯一改变的是，为每张幻灯片添加了链接。（index.html）

。。。
...

看看这个，即使有外部资源，它也能完美工作

您需要确保具备以下各项：

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

2.包括lean-slider.js

3.包括lean-slider.css

4.确保图像上有自动增量类（slider1、slider2、slider3等）

在所有这些（而不是之前）下面添加以下内容：

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

---

并确保包含图像的

div

有一个ID

ID=“slider”

我刚刚找到了它。您应该在以下三个位置编辑

z-index

属性：

.lean-slider-slide.current{
z指数：1；
}
#滑块方向导航{
z指数：2；
}
#滑块控制导航{
z指数：2；
}

---

下载Lean slider时，您可以在

slider.css

和

sample style.css

中找到它。

始终使用最后一个链接；使用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;
}

---

您必须提供您正在使用的代码，以便我们能够并愿意提供帮助。该代码基本上是下载中的文件。这就是为什么我没有包括它的原因，它太多了，我甚至不知道是哪一部分导致了它，尽管我怀疑是javascript。在添加链接的地方张贴标记。我们的示例没有包括我一开始就遇到的问题。此外，您没有设置导航功能格式的sample-styles.css，添加这些功能后，您将看到我在文章中提到的bug。（我已经列出了您列出的所有内容，在原始代码中已经是这样了，除了添加链接之外，我没有做任何更改。）您从未提到过任何关于sample-styles.css的内容，这是在你编辑了你的文章之后被包括进来的…如果你没有在你的第一篇文章中包括所有的内容，我们不能仅仅猜测你想要达到什么或者你的问题可能是什么。当您包含导航控件时，倾斜滑块可与不透明度一起工作。这使您的链接成为一个位于另一个之上的1，这仅是最后一个1起作用，因为它是最后加载的，它位于其他链接之上。如果您希望图像成为链接并具有图像导航控件，可以尝试使用Nivo滑块，否则你将需要进行大量的定制Sokay，谢谢你的解释，这就是我无法理解的-为什么它位于顶部。至于sample-styles.css，我后来添加了它，因为我是在发表文章后发现的，所以我正在更新我的发现。不知道你是怎么知道的，但那太棒了！我整天都在试图找到这个问题的解决办法+1给你。差不多一年之后。非常感谢你！：D

/*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;
}