2014-03-30 51 views
0

我想做一個簡單的網站來學習Twitter Bootstrap和SlideJS。下面的代碼是我到目前爲止。我目前有兩個問題。首先,即使我已將swap設置爲false,它仍會在滑塊底部顯示PlayStop。我的第二個問題是,不管我每次用class容器(twitter bootstrap class)放入某個div的東西時,我都無法調整容器內任何東西的寬度,它們都只佔用容器的整個寬度。寬度和交換SlideJS不工作

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/jquery.slides.min.js"></script> 
     <script src="bootstrap/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="css/custom.css"> 
     <style type="text/css"> 
      #slides{ 
       display: none; 

      } 
     </style> 

     <script type="text/javascript"> 


      $(function(){ 
       $("#slides").slidesjs({ 
       width: 700, 
       height: 393, 
       navigation: {active: false, effect: "fade"}, 
       pagination: {active: false}, 

       play: { 
        active: true, 
        effect: "fade", 
        interval: 4500, 
        auto: true, 
        swap: false, 
        pauseOnHover: true, 
        restartDelay: 2500 
       } 
       }); 

      }); 


     </script> 
    </head> 
    <body> 
     <div class="container"> 
      <div id="slides"> 

       <img src="imgs/alfa1.jpg" width="600" height="400"/> 

       <img src="imgs/alfa2.jpg" width="600" height="400"/> 

       <img src="imgs/alfa3.jpg" width="600" height="400"/> 

       <img src="imgs/alfa4.jpg" width="600" height="400"/> 

       <img src="imgs/alfa5.jpg" width="600" height="400"/> 

       <img src="imgs/alfa6.jpg" width="600" height="400"/> 

      </div> 
     </div> 
    </body> 
</html> 

下面是截圖:

enter image description here

回答

1
  1. 做什麼互換是顯示播放或停止,而不是播放和停止。如果你想禁用菜單,設置play : { active: false };

  2. 我不確定你的意思是通過調整子寬度?我已經在jsfiddle上做了一個工作示例(這將有助於將來在像jsfiddle這樣的沙箱中呈現您的問題)。如果你能澄清這個問題,我會很樂意提供幫助。

例如:http://jsfiddle.net/mAWLM/

+0

那麼它是因爲它是在與Twitter的引導容器類的容器跳水。我試圖找出如何解決這個問題。你給我的第一個解決方案的方式感謝。 – user1721803