gpt4 book ai didi

javascript - Nivo Slider 无法正常工作

转载 作者:行者123 更新时间:2023-12-05 01:34:45 27 4
gpt4 key购买 nike

好的,这是我第一次尝试使用 Nivo Slider。我的 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 的演示和支持页面,但我完全迷路了。任何帮助都会很棒!

最佳答案

你有一个语法错误应该是

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

关于javascript - Nivo Slider 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5524345/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com