好的,这是我第一次使用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的演示和支持页面上一遍又一遍,但我完全迷失了。任何帮助都会很精彩!
答案 0 :(得分: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>
答案 1 :(得分:2)
我想您忘记将此代码放在页面上的Nivo Slider div之后:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
加载它