知道为什么我的旋转木马不会自动改变图片吗?

时间:2016-05-19 14:17:35

标签: javascript html angular-ui-bootstrap

我正在尝试在我的网站上制作旋转木马,以便自动更改四张图片。这是我的代码,但是我一直试图弄清楚为什么它不会改变任何图片:

                <div class="carousel">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script src="js/bootstrap.min.js"></script>

            <script>
            $(function () {
                $('#homeCarousel').carousel({
                    interval:3000,
                    pause: "false"
                });
            });
            </script>

            <!-- Carousel start -->
            <div id="homeCarousel" class="carousel slide">
              <!-- Menu -->
              <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>

              <!-- Items -->
              <div class="carousel-inner">

                  <!-- Item 1 -->
                <div class="item active">
                    <img src="images/l1.jpg">
                  <div class="container">
                    <div class="carousel-caption"></div>
                  </div>
                </div>

                  <!-- Item 2 -->
                <div class="item">
                    <img src="images/l2.jpg"> 
                  <div class="container">
                    <div class="carousel-caption"></div>
                  </div>
                </div>

                  <!-- Item 3 -->
                <div class="item">
                    <img src="images/l3.jpg">
                  <div class="container">
                    <div class="carousel-caption"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Carousel end -->
            </div>

我已经尝试过更改间隔时间,重新格式化所有内容,查看不同的帖子,但我似乎无法弄明白。

知道可能是什么问题吗?

1 个答案:

答案 0 :(得分:0)

为了澄清一下,bootstrap carousel严重依赖于bootstrap CSS。您的帖子中没有它,因此请确保您的页面中有该引用。

之后,您的问题出在<li data-target="#myCarousel"...行。那些需要引用你的轮播div,所以他们应该有data-target="#homeCarousel"

一旦我修复了你的代码对我有效。