Nivo Slider工作不正常

好的，这是我第一次尝试用Nivo Slider。我的滑块停留在照片编号4上，完全没有滑动。我几乎完全丧失了如何在底部调用子弹导航。这是我的代码;Nivo Slider工作不正常

样式表中HEAD：

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

页面上NIVO滑块格：

<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支持页面，但我完全失去了。任何帮助将是美好的！

来源

2011-04-02 talkingD0G

你有一个语法错误，应该是

<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-02 16:29:40 daniellmb

谢谢！我觉得这很愚蠢，很明显。 – talkingD0G 2011-04-02 16:40:59

@ talkingD0G也应获得的价值后，在初始化对象摆脱流浪逗号为最后的事情（“nextText：‘下一步’）。因为如果你不那么IE就会抓狂 – Pointy 2011-04-02 16:48:02

@Pointy感谢。我确实看到并纠正了它，现在它的工作很完美:) :) – talkingD0G 2011-04-03 02:26:47

我想你忘了页面上的NIVO滑块的div后把这个代码：

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

这会将它

来源

2012-07-26 13:40:13 Paddy

Nivo Slider工作不正常

回答

相关问题