Question

我正在学习引导轮播。但是，当我将页面加载到Firefox 72 / chrome / falkon中时，间隔在$( document ).ready(...)，$(() = {...})中不起作用，但是在没有它们的情况下可以成功地工作。

代码

<!Doctype HTML>

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Carousels</title>

        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <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="images/a.jpg"/>
                        <div class="carousel-caption">First Slide</div>
                    </div>

                    <div class="item">
                        <img src="images/b.jpg"/>
                        <div class="carousel-caption">Second Slide</div>
                    </div>

                    <div class="item">
                        <img src="images/a.jpg"/>
                        <div class="carousel-caption">Third Slide</div>
                    </div>
                </div>

                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <script>
            $( document ).ready(() => {
                // works
                window.console.log('hi')

                // Doesn't work
                $('.carousel').carousel({
                    interval: 100
                })
            })
        </script>
    </body>
</html>

此代码包含2张分别显示为a.jpg和b.jpg的图像。但是，即使我在$(document).ready() JQuery函数中可以正常使用我的讲师的代码，但如果我将$()注释掉，代码也可以正常工作（从一个图像更改为另一个图像而不会滑动）。

为什么滑动间隔在JQuery中不起作用？

Answer 1

这是代码。希望它对您有用。如有任何更改，请通知我。只需将 slide 类添加到轮播中。滑动也很好，间隔也很好。

<!Doctype HTML>

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Carousels</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <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="https://dummyimage.com/600x400/000/fff"/>
                        <div class="carousel-caption">First Slide</div>
                    </div>

                    <div class="item">
                        <img src="https://dummyimage.com/600x400/ff00ff/fff"/>
                        <div class="carousel-caption">Second Slide</div>
                    </div>

                    <div class="item">
                        <img src="https://dummyimage.com/600x400/0033ff/fff"/>
                        <div class="carousel-caption">Third Slide</div>
                    </div>
                </div>

                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

      <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script>
           
                // It will work
                $('.carousel').carousel({
                    interval: 5000
                });
           
        </script>
    </body>
</html>

jQuery $（document）.ready（）中的引导轮播间隔不起作用

代码

1 个答案: