0

我有一个幻灯片，我想将每张幻灯片链接到某个 url，这应该很容易，但它不起作用。

我正在使用此处的滑块：http: //dev7studios.com/lean-slider/ 如果您不想下载代码，我想您可以使用检查元素并对其进行编辑以自己进行测试。

            ...
                <div class="slide1 lean-slider-slide">
                    <a href="http://www.google.com"><img src="images/1.jpg" alt="" /></a>
                </div>
            ...

我也尝试使用 onclick 和 javascript，但没有运气。

<script>
function test(){
    document.location.href = 'http://www.google.com';
}
</script>

<img src="images/1.jpg" alt="" onclick="test()" />
4

3 回答 3

2

我将默认演示版本上传到我的网站，将所有图片链接到 google.com。除了添加链接之外，我没有对原始代码进行任何更改。我假设您已经尝试过，但我看不出问题可能是什么。通常这些问题与脚本和样式表的路径有关，但这些看起来很简单。至少有一个可行的例子可供参考。我正在使用的代码如下。

    <!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8" />

    <title>Lean Slider Demo</title>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="scripts/modernizr-2.6.1.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="../lean-slider.js"></script>
    <link rel="stylesheet" href="../lean-slider.css" type="text/css" />
    <link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>

    <div class="slider-wrapper">
        <div id="slider">
            <div class="slide1">
                <a href="http://google.com" target="blank"></><img src="images/1.jpg" alt="" /></a>
            </div>
            <div class="slide2">
                <a href="http://google.com" target="blank"><img src="images/2.jpg" alt="" /></a>
            </div>
            <div class="slide3">
                <a href="http://google.com" target="blank"><img src="images/3.jpg" alt="" /></a>
            </div>
            <div class="slide4">
                <a href="http://google.com" target="blank"><img src="images/4.jpg" alt="" /></a>
            </div>
        </div>
        <div id="slider-direction-nav"></div>
        <div id="slider-control-nav"></div>
    </div>

    <script type="text/javascript">
    $(document).ready(function() {
        var slider = $('#slider').leanSlider({
            directionNav: '#slider-direction-nav',
            controlNav: '#slider-control-nav'
        });
    });
    </script>

</body>
</html>
于 2013-08-27T21:59:04.693 回答
1

它无法正常工作。预计每个图像都可以有自己的超链接，但是对于精益滑块，只有最后一个超链接适用于所有图像。在您的情况下，您已经为每个图像提供了 google.com，因此它看起来工作正常，但是一旦您更改每个 URL，您就会注意到它不会是最后一个超链接。

谢谢， 克里山

于 2014-04-01T01:56:34.580 回答
0

但是我不能有不同的 URL 的解决方案，总是取最后一个链接；使用 css 您可以强制元素的位置并为每个图像启用 yhe 链接：

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

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

.lean-slider-slide.current a
{
 float:left;
}
于 2015-07-09T22:34:06.570 回答