Jquery NivoSlider滑塊不工作$（'＃slider'）。nivoSlider（）;是不是一個函數

我在我的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>

來源

2012-06-14 Gaurav

你確定滑塊的正確JS文件加載？ –

你在一個頁面上使用兩個滑塊嗎？你可以發佈另一個html的標記嗎？如果你使用相同的初始化代碼，那麼它可能會因爲它們都具有相同的id（'＃slider'）而破壞它 – martincarlin87

試試這個：

也許有與jQuery發生衝突，所以使用.noConflict()：

var j = jQuery.noConflict(); 
j(document).ready(function() { 
    j('#slider').nivoSlider(); 
});

來源

2012-06-14 15:32:11

非常感謝@Andrea！有效。 – Gaurav

我，當我使用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>

這對jQuery也是一個特別的問題。

但是，你需要把你的JavaScript中的文件準備好功能：

// When the page is ready to be manipulated 
$(function() { 
     $(window).load(function() { 
      $('#slider').nivoSlider(); 
     }); 
});

來源

2012-06-14 15:33:01

Jquery NivoSlider滑塊不工作$（'＃slider'）。nivoSlider（）;是不是一個函數

回答

相關問題