Question

我有幻灯片，我想将每个幻灯片链接到一些网址，这应该很简单，但它不起作用。

我在这里使用滑块：http://dev7studios.com/lean-slider/ 如果您不想下载代码，我猜您可以使用inspect元素并对其进行编辑以自行测试。

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

我也试过用javascript运行onclick而没有运气。

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

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

Answer 1

我将默认演示版本上传到我的website，将所有图片链接到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>

Answer 2

它无法正常工作。预计每个图像都可以有自己的超链接，但是使用精益滑块，只有最后一个超链接适用于所有图像。在你的情况下，你给了google.com每个图像，所以看起来它工作正常，但一旦你改变了每个URL，你会发现它不会持续超链接。

谢谢，克尚

Answer 3

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

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

无法将图片链接到<a> tag not working for slideshow)</a>内的网址（<img/>标记

3 个答案: