我該如何解決：Uncaught TypeError：Object [object Object]與bxslider沒有方法'goToSlide'？

我正在嘗試使用bxslider通過自定義按鈕組來使用bxslider中的goToSlide函數滑動整個頁面的內容。當我用.bxSlider函數加載滑塊時，它加載得很好。但是當我點擊按鈕去特定幻燈片時，它說該方法不存在！任何想法，我犯了什麼錯誤？我該如何解決：Uncaught TypeError：Object [object Object]與bxslider沒有方法'goToSlide'？

這裏是我的代碼：

<html> 
<head> 
    <link rel="stylesheet" href="css/normalize.min.css"> 
    <link rel="stylesheet" href="css/grids.css"> 
    <link rel="stylesheet" href="css/main.css"> 

    <script src="js/vendor/jquery-1.11.0.min.js"></script> 
    <script src="js/main-test.js"></script> 
    <script src="js/vendor/jquery.bxslider.min.js"></script> 
</head> 
<body> 
    <section class="section-3" id="lastBlock-wrapper"> 
     <ul id="lastBlockCtrl"> 
      <li class="switch"> 
       <div class="switchbar"></div> 
       <div class="switchbar"></div> 
       <div class="switchbar"></div> 
      </li> 
      <li class="diamond"><a onClick="jumptoslide(0);" class="active">Performance</a></li> 
      <li class="diamond"><a onClick="jumptoslide(1);">Durability</a></li> 
      <li class="diamond"><a onClick="jumptoslide(2);">Transparency</a></li> 
     </ul> 
     <ul id="slider"> 
      <li> 
       <section class="feature"> 
        <div class="grid" style="height: 100%;"> 
         <div class="grid__item two-fifths grid--center slider-bg"> 
          <h1>Test</h1> 
         </div> 
         <div class="grid__item three-fifths cont"> 
          <h1>Performance</h1> 
          <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p> 
         </div> 
        </div> 
       </section> 
      </li> 
      <li> 
       <section class="feature"> 
        <div class="grid"> 
         <div class="grid__item two-fifths grid--left"> 

         </div> 
         <div class="grid__item three-fifths cont"> 
          <h1>Showcase</h1> 
          <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p> 
         </div> 
        </div> 
       </section> 
      </li> 
      <li> 
       <section class="feature"> 
        <div class="grid"> 
         <div class="grid__item two-fifths grid--left"> 

         </div> 
         <div class="grid__item three-fifths cont"> 
          <h1>Showcase</h1> 
          <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p> 
         </div> 
        </div> 
       </section> 
      </li> 
     </ul> 
    </section> 
</body>

$(document).ready(function() { 

    //last slider 
    var bxslider = $('.slider').bxSlider({   
     controls: false, 
     easing: 'ease-in-out' 
    }); 

    jumptoslide = function (slide) { 
     bxslider.goToSlide(slide); 
    }; 

});

來源

2014-02-15 Khanjan Desai

你沒有Slider類。你只有一個滑塊ID。

變化

var bxslider = $('.slider').bxSlider({   
    controls: false, 
    easing: 'ease-in-out' 
});

到

var bxslider = $('#slider').bxSlider({   
    controls: false, 
    easing: 'ease-in-out' 
});

來源

2014-02-15 04:05:43 James

@KhanjanDesai沒問題。很高興我能幫上忙。 :) – James

更改$('.slider')到$('#slider')在你的JavaScript代碼，滑塊id，你在你的HTML它不是class提及。

.用於表示類。

#用於表示id。

希望它有幫助。

來源

2014-02-15 06:17:13 UjjawalKr

我該如何解決：Uncaught TypeError：Object [object Object]與bxslider沒有方法'goToSlide'？

回答

相關問題