logo标签列表

Bootstrap走马灯内部"autoplay"

javascriptjqueryhtmltwitter-bootstrapcarousel
8

有人能帮我吗？我知道这里有一些问题。为什么我必须在头部的末尾和页面底部链接bootstrap.min.js？我已经尝试过只用其中一个，但不起作用。另外，我想要轮播图在加载页面时就开始，并且在点击控制器时也可以操作，而不仅仅是在点击控制器时才开始。

    <head>
        <title>The James Baldwin School</title>
        <link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css">
        <link href="Main.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
        <div class="navbar-wrapper">
  <div class="container">
    <div id="navtop" class="navbar navbar-inverse navbar-static-top">

        <div class="navbar-header">
        <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="navbar-brand" href="#">The James Baldwin School</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>



    </div>
  </div><!-- /container -->
</div><!-- /navbar wrapper -->

        <!--- Javascript Bootstrap --->
        <script src="Framework/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</header>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
  <div class="item active">
      <img src="http://1.bp.blogspot.com/-BUrT0CP-6nQ/U1prUuv6VjI/AAAAAAAAFbY/a6PUNgNhSWM/s1600/1500x500-New-York-Skyline-Twitter-Header0017.jpg" style="width:100%" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <h1>Bootstrap 3 Carousel</h1>
          <p>Pictures slide with overlapping words</p>
          <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
        </p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://1.bp.blogspot.com/-jBZKbiHI_2U/U1pszgzFAbI/AAAAAAAAFcI/8xrxWuBse9o/s1600/1500x500-New-York-Skyline-Twitter-Header0024.jpg" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <h1>Each Slide can be different</h1>
          <p>I just need some one to pick the pictures and words</p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="http://mooxidesign.com/wp-content/uploads/2014/04/New-york-1500x500.jpg" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <h1>Percentage-based sizing</h1>
          <p>This Site is fully responsive and adjusts to the size of the browser your using. Meaning that it looks great on smart-phones</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
</div>       
<!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

  <!-- Three columns of text below the carousel -->
<div id="about">
  <div class="row">
    <div class="col-md-4 text-center">
      <img class="img-circle" src="http://placehold.it/140x140">
      <h2>Brady Smith</h2>
      <p>Principal Co-Director</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
    <div class="col-md-4 text-center">
      <img class="img-circle" src="http://placehold.it/140x140">
      <h2>Josh Heisler</h2>
      <p>Teacher Co-Director</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
    <div class="col-md-4 text-center">
      <img class="img-circle" src="http://placehold.it/140x140">
      <h2>Christine Olsen</h2>
      <p>Admissions</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
  </div><!-- /.row -->
</div>

  <!-- START THE FEATURETTES -->



  <!-- /END THE FEATURETTES -->


  <!-- FOOTER -->
  <footer>
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p>This site was created by Isaac Perez. · <a href="http://www.google.com">Check it out</a></p>
  </footer>

  </div><!-- /.container -->

</body>
        <script src="Framework/js/bootstrap.min.js"></script>
        <script src="Framework/js/jquery-2.1.3.min.js"></script>
        <script type="text/javascript">// <![CDATA[
        var $ = jQuery.noConflict(); $(document).ready(function()  { $('#myCarousel').carousel({ interval: 3000, cycle: true }); });
        // ]]></script>
</html>
4个回答
15

我刚刚搭建了一个 Fiddle，其中包含了您示例中的轮播图、jQuery版本2.1.3、bootstrap.js和bootstrap.css等外部资源，以及您的脚本来初始化轮播图。

$('#myCarousel').carousel({
  interval: 3000,
  cycle: true
});

它正在运作 - 它会在页面加载时启动并且控制器也在工作。

如果它对您不起作用，可能是在加载bootstrap之前就已经加载了jQuery - 必须在bootstrap之前包含jQuery。要检查这种情况是否存在，请查看是否有任何错误/控制台消息，例如“错误：Bootstrap的JavaScript需要jQuery”。此外，您还包括2个不同版本的jQuery-1.11.1和2.1.3。如果没有必要（例如，对于依赖较旧版本jQuery的某些插件），请尝试仅加载最新版本。
此外，您正在将脚本标记放置在关闭body和html标记之间，这可以工作，但不合法 - 有关详细信息，请参见链接，在</body>和</html>之间放置脚本标记。
如果真的有必要使用不同版本的jQuery作为参考资料，则可以检查http://api.jquery.com/jquery.noconflict/。

11

您可以通过在 HTML 中使用 data-interval 标签来完成此操作。 将其插入到 <div id="myCarousel" class="carousel slide"> 中，使其看起来像这样:

<div id="myCarousel" class="carousel slide" data-interval="3000">

将3000的值调高可以降低速度，将其调低可以加快速度。

2
这不会自动启动轮播。它只是设置每个幻灯片之间的“间隔”。似乎没有办法在没有“JavaScript”的情况下完成此操作。 - Aakash
1
尽管这并没有回答问题 - 感谢您的回答，因为我不知道这一点。每天学习新东西真好。 - matthias_h
0
在包含轮播图的 div 中添加自定义属性 data-ride="carousel"。 您还可以选择添加 data-interval="5000" 以更改幻灯片切换持续时间（以毫秒为单位）。
0

这是针对Bootstrap v5.3的。请阅读https://getbootstrap.com/docs/5.3/components/carousel/#methods

在轮播图div中将data-bs-ride设置为'carousel'。

    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel"> </id>

然后，在body标签的最后写入以下代码：

      <body>
      ...
        <script>
        const myCarouselElement = document.querySelector('#carouselExample')

        const carousel = new bootstrap.Carousel(myCarouselElement, {
           interval: 2000,
           touch: false
          })
        </script> 
    </body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接