我正在学习引导轮播。但是当我将页面加载到 Firefox 72/铬/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 中不起作用？
这是代码。希望它能为你工作。如果有任何更改，请告诉我。只需将幻灯片类添加到轮播即可。滑动工作正常，间隔也很好。
<!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>