Question

我尝试了很多jQuery来创建带有上一个/下一个按钮和自动滑动功能的图像幻灯片。但是，有一个恒定的错误。在我的网页中，幻灯片显示只是黑屏，没有加载图片。以下示例是此网站：http://designmodo.com/image-slider-jquery-css3/

这是我的代码：

<html lang="es">
    <head> <title>ACE ARCHERY</title>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link rel="stylesheet" href="Stylesheet.css">   
        <link rel="stylesheet" href="nivo-slider.css" media="screen">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="jquery.nivo.slider.pack.js"></script>
        <script>
            $(window).load(function() {
                $('#slider').nivoSlider({
                    directionNavHide: false,
                    captionOpacity: 1,
                    prevText: '<',
                    nextText: '>'
                });
            });
        </script>

<!--        <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

        <script type ="text/javascript">
            $(document).ready(function slider() {
                $("#1").show("fade", 500);
                $("#1").delay(5500).hide("slide", {direction: 'left'}, 500);

                var sc = $(".slider img").size();
                var count = 2;

                setInterval(function () {
                    $(".slider #" + count).show("slide", {direction: "right"}, 500);
                    $(".slider #" + count).delay(5500).hide("slide", {direction: 'left'}, 500);

                    if (count == sc) {
                        count = 1;
                    } else {
                        count = count + 1;
                    }
                }, 6500);
            }
            );

        </script>-->

    </head>

<!--    <body onload="Slider();" >-->
    <body>
        <div class="wrapper">
        <div class="slider">
            <div class="slider-wrapper futurico-theme">
                <div id="slider" class="nivoSlider">
                    <img src="Slide_image/one.jpg" alt="">
                    <img src="Slide_image/two.jpg" alt="">
                    <img src="Slide_image/three.jpg" alt="">
                    <img src="Slide_image/four.jpg" alt="">
                    <img src="Slide_image/five.jpg" alt="">
                    <img src="Slide_image/six.jpg" alt="">
                </div>
            </div>
<!--        <div class = "slider">
            <img id="1" src="Slide_image/one.jpg" border = "0" alt = "One"/>
            <img id="2" src="Slide_image/two.jpg" border = "0" alt = "Two"/>
            <img id="3" src="Slide_image/three.jpg" border = "0" alt = "Three"/>
            <img id="4" src="Slide_image/four.jpg" border = "0" alt = "Four"/>
            <img id="5" src="Slide_image/five.jpg" border = "0" alt = "Five"/>
            <img id="2" src="Slide_image/six.jpg" border = "0" alt = "Six"/>
        </div>-->
    </div>

CSS：

.futurico-theme.slider-wrapper {
    position: relative;
    width: 500px;
    height: 250px;
    margin: 0;
    padding: 5px;

    background: #141517;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.futurico-theme .nivoSlider {
    position: relative;
    width: 500px;
    height: 250px;
}

.futurico-theme .nivoSlider img {
    display: none;
    position: absolute;
    width: 500px;
    height: 250px;
    top: 0;
    left: 0;
}
.futurico-theme .nivo-controlNav {
    position: absolute;
    bottom: -30px;
    left: 105px;
}
.futurico-theme .nivo-controlNav a {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    text-indent: -9999px;

    background: #141517;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

    -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}
.futurico-theme .nivo-directionNav a {
    display: block;
    top: 60px;

    font-family: 'Consolas', sans-serif;
    font-size: 40px;
    color: #141517;
    text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}

.futurico-theme a.nivo-prevNav { left: -40px; }

.futurico-theme a.nivo-nextNav { right: -40px; }

.slider-wrapper { 
    width: 80%; 
    margin: 100px auto;
}

Answer 1

请交叉检查你的nivo javascript和css路径

<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="jquery.nivo.slider.pack.js"></script>

如果未加载nivo javascript，您将获得黑屏。

以下是工作示例jsfiddle：http://jsfiddle.net/zeskysee/jjucqame/3/

要模拟您的错误，您可以尝试删除外部资源“jquery.nivo.slider.js”，然后您将看到没有幻灯片的黑色

为什么jQuery图像幻灯片不能在netbeans中工作

1 个答案: