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

Slideshow - link slide to URL only working for last slide

本文关键字：幻灯片 最后 适用于 一张 链接 URL      更新时间：2023-09-26

我使用的是倾斜滑块：http://dev7studios.com/lean-slider/

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

EDIT:我还注意到，如果不包含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>
...

我刚刚想明白了。您应该在以下三个位置编辑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.包括jQuery库（在精简滑块.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"

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