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 で遊んで、要素の位置を強制し、各画像のリンクを有効にすることができます。

/*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 に答える