Question

我的主页上有一个旋转木马用于我的网站，但上一个/下一个按钮和指示灯不起作用。

但是，如果我剪掉旋转木马的代码片段，它在只有旋转木马的页面上工作得很好。

以下是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale = 1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Jquery CDN -->
    <script   src="https://code.jquery.com/jquery-2.2.2.js"   integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE="   crossorigin="anonymous"></script>

  </head>

  <body>
  <!-- logo -->

  <div>
     <p class = "logochinese">
     <a class = "logo" href="index.html">
        <img src="logo.jpg" width="117" height="100">
     </a>登峰国际教育
     </p>

  </div>

    <nav class="navbar navbar-default center">
        <div class="container-fluid">



           <!--Menu-->
           <div>
              <ul class="nav navbar-nav navbar-right">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="#">Partnership</a></li>
                 <li><a href="#">Our Services</a></li>
                 <li><a href="contact.html">Contact Us</a></li>
              </ul>
            </div>
         </div>
     </nav>
    <!-- Indicators for carousel -->

    <div id="myCarousel2" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
          <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel2" data-slide-to="1"></li>
          <li data-target="#myCarousel2" data-slide-to="2"></li>
          <li data-target="#myCarousel2" data-slide-to="3"></li>
       </ol>

      <!--Wrapper for slides-->
      <div class="carousel-inner" role="listbox">
         <div class="item active">
            <img src="img/test1.jpg" alt="test1">
            <div class="carousel-caption">
               <h3>Schools</h3>
               <p>Schools caption</p>
            </div>
          </div>

          <div class="item">
             <img src="img/test2.jpg" alt="test2">
             <div class="carousel-caption">
                <h3>Highschool</h3>
                <p>Secondary School</p>
              </div>
          </div>

          <div class="item">
             <img src="img/test3.jpg" alt="test3">
             <div class="carousel-caption">
                <h3>Students</h3>
                <p>High school students</p>
             </div>
          </div>


          <div class="item">
             <img src="img/test4.jpg" alt="test4">
             <div class="carousel-caption">
                <h3>Students</h3>
                <p>Elementary school students</p>
             </div>
          </div>
        </div>


      <!--Left/Right controls-->
      <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
      </a>
    </div>


  </body>
</html>

CSS：

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
}

当我尝试按下旋转木马的左箭头或右箭头时，网页会跳转到我的旋转木马的位置，并将＃myCarousel2附加到网址的末尾。

似乎将按钮解释为锚标记。我尝试用{data}目标替换<a>标记中的href属性，但没有运气。

有谁知道如何解决这个问题？

Answer 1

请在jquery.js文件之前添加bootstrap.min.js文件，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

因为您的轮播代码没有错误。这与carousel example几乎相同。

Answer 2

你在标题中调用了脚本也是你先调用Bootstarp js但你应该先调用jQuery。因为jQuery需要工作Bootstrap js。

在页脚区域调用所有脚本并首先调用jQuery 就像这个一样

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

Bootstrap Carousel独立工作，但不在我的网页上

2 个答案: