2

好的，这是我第一次尝试使用 Nivo Slider。我的滑块卡在第 4 张照片上，它根本不滑动。我几乎完全不知道如何调用底部的子弹导航。这是我的代码；

HEAD 中的样式表：

<link href="nivo-slider.css" rel="stylesheet" type="text/css" />

页面上的 Nivo Slider div：

<div id="nivo_slider">
     <div id="slider" class="nivoSlider">
           <img src="images/slideshow/1.jpg" width="791" height="254" />
           <img src="images/slideshow/5.jpg" width="791" height="254" />
           <img src="images/slideshow/3.jpg" width="791" height="254" />
           <img src="images/slideshow/2.jpg" width="791" height="254" />
           <img src="images/slideshow/4.jpg" width="791" height="254" />
     </div>
</div>

页面底部的 JavaScript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
});
</script>

这是我的CSS：

#nivo_slider { 
        width:791px; 
        height:254px; 
        float:left; 
        margin-left:46px; 
        padding:8px; 
        background:#e6e5e5; 
        border:solid 1px #d1d1d1;
}
#slider { 
        float:left; 
        width:791px; 
        position:relative; 
        background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
        position:absolute;
        top:0px;
        left:0px;
        display:block;
}
.nivo-controlNav {
        position:absolute;
        left:260px;
        bottom:-42px;
}
.nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(images/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
}
.nivo-controlNav a.active {
        background-position:0 -22px;
}

我一遍又一遍地浏览了 Dev7 的演示和支持页面，但我完全迷失了。任何帮助都会很棒！

4

2 回答 2

7

你有一个语法错误应该是

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next' // Next directionNav text
     });
});
</script>
于 2011-04-02T16:29:40.487 回答
2

我想你忘了把这段代码放在页面上的 Nivo Slider div 之后：

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

这会加载它

于 2012-07-26T13:40:13.100 回答