javascript - 在预定义的 div 中使用 nivoslider

Question

我正在尝试将 NivoSlider 包含到一个 div 中，id imageslider 到我的页面中。我已经尝试按照他们的教程进行操作 website ，但现在已经四天没有效果了。请检查一下:

---

index.php

<!-- In the head section I have included these --> 
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- Somewhere in the body section -->
<div id="imageslider">
    <div class="slider-wrapper">
         <div id="slider" class="nivoSlider">
            <img src="abc.jpeg" alt="" height="360" width="700"/>
            <img src="uvw.jpeg" alt="" height="360" width="700"/>
            <img src="pqr.jpeg" alt="" height="360" width="700"/>
            <img src="xyz.jpeg" alt="" height="360" width="700"/>
         </div>
    </div>
</div>

<!-- Also at the end of the body tag-->
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

---

在我的样式表中，style.css

#imageslider {
float: right;
width: 700px;
background-color: blue;
height: 360px;
margin-left: 5px;
margin-right: 15px; 
}

/*Rest styles are copied from the website itself*/
.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;
}

---

当我打开或刷新页面时，imageslider div 中没有显示图像。请帮帮我!

Answer 1

确保在加载 Nivo Slider 之前加载 jQuery:

<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>