gpt4 book ai didi

javascript - Bootstrap 轮播控件不起作用

转载 作者:行者123 更新时间:2023-11-28 20:24:52 25 4
gpt4 key购买 nike

twitter bootstrap 轮播不起作用。我尝试将 id ('#mycarousel') 更改为 .carousel 或 .mycarousel 但没有任何效果。当我单击控件时,它不会前进。这段代码有什么问题?

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
$('#mycarousel').carousel();
}
</script>
</head>

<body>
<div class="container">
<div class="row">

<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
<div class="item active"><img src="car1.jpg"></div>
<div class="item"><img src="car2.jpg"></div>
<div class="item"><img src="car3.jpg"></div>
<div class="item"><img src="car4.png"></div>
<div class="item"><img src="car5.jpg"></div>
</div>
<a class="carousel-control left" href="#mycarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#mycarousel" data-slide="next">&rsaquo;</a>

</div>
</div>

</div>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

最佳答案

以下代码永远不会被执行,因为您从未真正调用它。

$('#mycarousel').carousel();

您应该更改以下内容:

function(){
$('#mycarousel').carousel();
}

至:

$(function(){
$('#mycarousel').carousel();
});

这将使其在 dom 准备就绪时执行。

您也不要关闭加载 Bootstrap CSS的链接标记。以下:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"

应该是:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

您加载 JS 文件的顺序我不确定是否正确。我想它们应该是相反的顺序。

关于javascript - Bootstrap 轮播控件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17576626/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com