0

我似乎无法让 nivo 滑块工作。我已按照他们网站上的说明进行操作。

这是我的index.html。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $('#slider').nivoSlider();
            });
        </script>
    </head>
    <body>
        <div class="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <img src="images/nemo.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="#htmlcaption" /></a>
                <img src="images/toystory.jpg" alt="" title="This is an example of a caption" />
                <img src="images/walle.jpg" alt="" />
            </div>
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
    </body>
</html>

这是我的style.css。

.nivoSlider {
    position:relative;
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

我不知道为什么它不起作用。我也尝试过引用最新版本的 jQuery。

4

1 回答 1

0

当您使用 jquery 并且您不明白为什么它不起作用时，请使用 webdeveloper 工具。

如果您使用的是使用 firebug 插件，或者如果您使用 chrome，请使用检查元素工具。他们做什么他们会告诉你错误。通过这种方式，您可以了解正在发生的事情，并且可以提出更好的问题。

于 2013-04-17T10:19:56.340 回答