文章/答案/技术大牛

发布

社区首页 >问答首页 >引导旋转木马是独立工作的，但不在我的网页上。

问引导旋转木马是独立工作的，但不在我的网页上。
EN

Stack Overflow用户

提问于 2016-03-30 00:26:43

回答 2查看 440关注 0票数 1

我有一个旋转木马在我的网页为我的网站，但前/下一个按钮和指示不工作。

但是，如果我剪掉旋转木马的代码，它在一个只有旋转木马的页面上运行得非常好。

下面是代码：

<!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附加到url的末尾。

似乎可以将按钮解释为锚标记。我尝试用数据目标替换<a>标记中的href属性，但没有成功。

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

carousel

jquery

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-03-30 00:41:32

请在以下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>

因为在你的旋转木马代码中没有错误。这个旋转木马实例几乎是一样的。

票数 3

Stack Overflow用户

发布于 2016-03-30 00:53:50

您在header中调用了脚本，也首先调用了Bootstarp，但是您应该先调用jQuery。因为jQuery需要启动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>

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36297515

复制

相似问题

问引导旋转木马是独立工作的，但不在我的网页上。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导旋转木马是独立工作的，但不在我的网页上。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导旋转木马是独立工作的，但不在我的网页上。
EN