为什么jQuery图像幻灯片在Netbeans中不起作用
why is jQuery image slideshow not working in netbeans
我已经尝试了很多jQuery来创建带有上一个/下一个按钮和自动幻灯片功能的图像幻灯片。但是,有一个持续的错误。在我的网页中,幻灯片只是黑屏,没有加载图片。我下面的例子是这个网站:http://designmodo.com/image-slider-jquery-css3/
这是我的代码:
<html lang="es">
<head> <title>ACE ARCHERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="Stylesheet.css">
<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
directionNavHide: false,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
<!-- <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type ="text/javascript">
$(document).ready(function slider() {
$("#1").show("fade", 500);
$("#1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function () {
$(".slider #" + count).show("slide", {direction: "right"}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction: 'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
);
</script>-->
</head>
<!-- <body onload="Slider();" >-->
<body>
<div class="wrapper">
<div class="slider">
<div class="slider-wrapper futurico-theme">
<div id="slider" class="nivoSlider">
<img src="Slide_image/one.jpg" alt="">
<img src="Slide_image/two.jpg" alt="">
<img src="Slide_image/three.jpg" alt="">
<img src="Slide_image/four.jpg" alt="">
<img src="Slide_image/five.jpg" alt="">
<img src="Slide_image/six.jpg" alt="">
</div>
</div>
<!-- <div class = "slider">
<img id="1" src="Slide_image/one.jpg" border = "0" alt = "One"/>
<img id="2" src="Slide_image/two.jpg" border = "0" alt = "Two"/>
<img id="3" src="Slide_image/three.jpg" border = "0" alt = "Three"/>
<img id="4" src="Slide_image/four.jpg" border = "0" alt = "Four"/>
<img id="5" src="Slide_image/five.jpg" border = "0" alt = "Five"/>
<img id="2" src="Slide_image/six.jpg" border = "0" alt = "Six"/>
</div>-->
</div>
和 CSS:
.futurico-theme.slider-wrapper {
position: relative;
width: 500px;
height: 250px;
margin: 0;
padding: 5px;
background: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.futurico-theme .nivoSlider {
position: relative;
width: 500px;
height: 250px;
}
.futurico-theme .nivoSlider img {
display: none;
position: absolute;
width: 500px;
height: 250px;
top: 0;
left: 0;
}
.futurico-theme .nivo-controlNav {
position: absolute;
bottom: -30px;
left: 105px;
}
.futurico-theme .nivo-controlNav a {
display: block;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
text-indent: -9999px;
background: #141517;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}
.futurico-theme .nivo-directionNav a {
display: block;
top: 60px;
font-family: 'Consolas', sans-serif;
font-size: 40px;
color: #141517;
text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme a.nivo-prevNav { left: -40px; }
.futurico-theme a.nivo-nextNav { right: -40px; }
.slider-wrapper {
width: 80%;
margin: 100px auto;
}
请交叉检查您的 nivo javascript 和 css 路径
<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="jquery.nivo.slider.pack.js"></script>
如果未加载nivo javascript,您将获得黑屏。
以下是工作示例 jsfiddle: http://jsfiddle.net/zeskysee/jjucqame/3/
为了模拟您遇到的错误,您可以尝试删除外部资源"jquery.nivo.slider.js",然后您将看到没有幻灯片的黑色
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Netbeans 8.0.2 extjs 项目自动完成不起作用
- 为什么jQuery图像幻灯片在Netbeans中不起作用
- Netbeans 7.3.1在我的Javascript Class上自动完成代码;不起作用