2

我一直在为这个 Bootstrap 轮播而苦苦挣扎。我搜索了整个论坛，但无法正常工作。这是代码：

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8">
    <title>Sindicato de Hot&eacute;is, Bares, Restaurantes e Similares do Litoral Norte do RS</title>
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="css/index.css" rel="stylesheet" />
    <script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javaScript">
      <!--
        $(document).ready(function(){
          $("#about").hide();
          $("#drop").click(function(){
            $("#about").toggle(200);
          });
          $('.carousel slide').carousel('cycle');
          //Conteúdos
          $("#body").load("home.html");
          $("#home").click(function(){
            $("#body").load("home.html");
          });
          $("#historia").click(function(){
            $("#body").load("historia.html");
          });
          $("#diretoria").click(function(){
            $("#body").load("diretoria.html");
          });
          $("#base").click(function(){
            $("#body").load("base.html");
          });
          $("#associe").click(function(){
            $("#body").load("associe.html");
          });
          $("#documentos").click(function(){
            $("#body").load("documentos.html");
          });
          $("#contato").click(function(){
            $("#body").load("contato.html");
          });
        });
      //-->
    </script>
  </head>
  <body>
    <div class="container">
      <div class="row-fluid">
        <div id="header" class="span12">
          <div class="span2"><img src="img/logo_small.png" /></div>
          <div class="span10">
            <div id="carousel" class="carousel slide">
              <div class="carousel-inner">
                <div class="active item">
                  <img src="img/carrousel1.jpg" alt="" />
                  <div class="carousel-caption">
                  <p>Torres: A Mais Bela Praia Ga&uacute;cha</p>
                </div>
              </div>
              <div class="item">
                <img src="img/carrousel2.jpg" alt="" />
                <div class="carousel-caption">
                  <p>Mostardas: uma carrada de passarinhos</p>
                </div>
              </div>
              <div class="item">
                <img src="img/carrousel3.jpg" alt="" />
                <div class="carousel-caption">
                  <p>Tr&ecirc;s Cachoeiras: t&atilde;o sem gra&ccedil; que a &uacute;nica atracao eh uma arvore</p>
                </div>
              </div>
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
          </div>
        </div>
        <div id="main" class="row-fluid">
          <div class="span12"><img src="img/header_orange.png" /></div>
        </div>
      </div>
      <div id="main" class="row-fluid">
        <div id="menu" class="span2">
          <div id="header_menu"><img src="img/top_menu.png" alt=""></div>
          <div id="options_menu">
            <ul class="unstyled">
              <li><label id="home">Home</label></li>
              <li><img src="img/line.png"></li>
              <li><label id="drop">Sindicato</label></li>
              <img src="img/line.png">
              <div id="about">
                <ul class="unstyled">
                  <li><label id="historia">Hist&oacute;ria</label></li>
                  <img src="img/line.png">
                  <li><label id="diretoria">Diretoria</label></li>
                  <img src="img/line.png">
                </ul>
              </div>
              <li><label id="base">Base territorial</label></li>
              <li><img src="img/line.png"></li>
              <li><label id="associe">Associe-se</label></li>
              <li><img src="img/line.png"></li>
              <li><label id="documentos">Documentos</label></li>
              <li><img src="img/line.png"></li>
              <li><label id="contato">Contato</label></li>
            </ul>
          </div>
          <div id="bottom_menu"><img src="img/top_menu.png" alt=""></div>
        </div>
        <div id="body" class="span10"></div>
      </div>
      <div id="footer">
        <strong>Sindicato de Hot&eacute;is, Bares, Restaurantes e Similares do Litoral Norte - RS</strong></br>
        <span>Rua Fernandes Bastos, 100 - sala 16 :: Tramanda&iacute;/RS :: CEP: 95590-000 :: 
            Fone: (51) 8116.9669 :: E-mail: <a href="mailto:#">contato@sindlitoralnorters.com.br</a></span></br>
      </div>
    </div>
  </div>
</body>
</html>

问题是，不仅轮播不起作用，之后的所有代码$('.carousel).carousel()都被禁用。我想这可能是一个 jQuery 问题，但我没有发现任何错误 - .js 文件是正确的，它们的位置是正确的。如果我注释掉该 jQuery 行，代码将再次起作用。

有人可以帮我吗？

4

2 回答 2

2

需要在Bootstrap之前包含 jQuery... 更改

<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>

到

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
于 2013-02-11T17:00:27.313 回答
0

您需要在加载其他 .js 文件之前加载 jQuery。

于 2013-02-11T17:00:29.670 回答