javascript Jquery NivoSlider 滑块不起作用 $('#slider').nivoSlider(); 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11036321/
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
Jquery NivoSlider Slider is not working $('#slider').nivoSlider(); is not a function
提问by Kumar Gaurav
I am using nivo jquery image slider in my asp.net application, but after page load its not changing the images and only showing "loading.gif" image, on jquery debugging i am getting error message : $('#slider').nivoSlider(); is not a function.
我在我的 asp.net 应用程序中使用 nivo jquery 图像滑块，但在页面加载后它不会更改图像而只显示“loading.gif”图像，在 jquery 调试时我收到错误消息：$('#slider')。 nivoSlider(); 不是函数。
<link href="css/NivoSlideThemes/default/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/NivoSlideThemes/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/menu/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider();
});
</script>
<style>
.theme-default #slider {
margin:1px auto 0 auto;
width:674px; /* Make sure your images are the same size */
height:311px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
/* margin-top:150px; */
}
.clear {
clear:both;
}
</style>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/cfgSliderImages/1.gif" alt="" />
<img src="images/cfgSliderImages/2.gif" alt="" title="Solar Power" />
<img src="images/cfgSliderImages/3.gif" alt="" data-transition="slideInLeft" />
<img src="images/cfgSliderImages/4.gif" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
回答by Andrea Turri
Try this:
试试这个：
Maybe there is a conflict with jQuery, so use .noConflict():
可能和 jQuery 有冲突，所以使用.noConflict()：
var j = jQuery.noConflict();
j(document).ready(function () {
j('#slider').nivoSlider();
});
回答by David East
I get this problem when I'm using Visual Studio every now and then. Instead of referencing the scripts in the body, I add them in the head.
当我不时使用 Visual Studio 时，我会遇到这个问题。body我没有引用 中的脚本，而是将它们添加到head.
<head>
<link href="css/NivoSlideThemes/default/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/NivoSlideThemes/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/menu/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
This has especially been a problem with jQuery as well.
这也是 jQuery 的一个问题。
However, you need to put your javascript in the document ready function:
但是，您需要将 javascript 放入文档就绪函数中：
// When the page is ready to be manipulated
$(function() {
$(window).load(function () {
$('#slider').nivoSlider();
});
});
