Question

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

                <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>

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

知道可能是什么问题吗？

Answer 1

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

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

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

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

1 个答案: