Javascript Nivo Slider 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5524345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nivo Slider just not working properly
提问by talkingD0G
Ok so this is my first try with the Nivo Slider. My slider is stuck on photo number 4, it doesn't slide at all. I'm almost completely lost as to how to call the bullet navigation at the bottom. This is my code;
好的，这是我第一次尝试使用 Nivo Slider。我的滑块卡在 4 号照片上，它根本不滑动。我几乎完全不知道如何调用底部的子弹导航。这是我的代码；
Stylesheet in HEAD:
HEAD 中的样式表：
<link href="nivo-slider.css" rel="stylesheet" type="text/css" />
Nivo Slider div on page:
页面上的 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 at bottom of page:
页面底部的 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>
Here's my CSS:
这是我的 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;
}
I've gone over and over the demos and the support page from Dev7 but I'm totally lost. Any help would be wonderful!
我一遍又一遍地浏览了 Dev7 的演示和支持页面，但我完全迷失了。任何帮助都会很棒！
回答by daniellmb
You've got a syntax error should be
你有一个语法错误应该是
<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>
回答by Paddy
I think you forgot to put this code after the Nivo Slider div on page:
我想你忘了把这段代码放在页面上的 Nivo Slider div 之后：
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
This loads it up
这加载它
