旋转木马不会从一张图片滑到下一张图片。
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Economic Prosperity - The No.1 Minecraft Economy Server!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<style>
.carousel .item {
width: 100%; /*slider width*/
max-height: 400px; /*slider height*/
}
.carousel .item img {
width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
.block {
margin-left: -20px;
margin-right: -20px;
}
}
</style>
</head>
<body>
<div class=" navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="#" class="brand">Economic Prosperity</a>
<ul class="nav pull-left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Vote</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#"> <b>Server Status:</b></a></li>
<li><a href="#" style="color:#00CC00"><b>Online</b></a></li>
</ul>
<div class="nav pull-right">
<a class="btn btn-primary">Log In</a>
</div>
</div>
</div>
</div>
<div class="container" style="width:100%;"> <!--Start of Carousel -->
<section class="block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://fc07.deviantart.net/fs71/f/2010/299/f/6/minecraft_cave_by_harryisland-d31jtwd.jpg" alt="Slide1" />
</div>
<div class="item">
<img src="http://fc05.deviantart.net/fs70/i/2013/066/6/d/minecraft_grass_background_by_lastvoltage-d5x9vzb.png" alt="Slide2" />
</div>
<div class="item">
<img src="http://img16.imageshack.us/img16/4206/tapeta16x9.png" alt="Slide3" />
</div><div class="carousel-caption" >
<h1 style="color:#999">EcoPro - The No.1 Server dedicated to Economy!</h1>
<p class="lead">Sell your items, trade with players, sell on the auction and even set up your own shop in a city!</p>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</section>
</div> <!--End of Carousel -->
<div class="hero-unit" style="width:90%; margin-right:auto; margin-left:auto;"> <!-- Start Hero -->
<h2>What is EcoPro all about?</h2>
<p>We aim to provide the best server out there with the sole main aim of gaining wealth to purchase benefits. Our server is not just your standard server, we put effort, time and skill into the creation of it. The sole aim of this server is to entertain YOU as best it can. The server is 100% non profit, so all of the donations recieved go straight back into the server to add to the quality of your gaming experience!
<p><a href="#" class="btn btn-info">Tell me more!</a></p>
</div> <!-- End Hero Unit -->
<div class="container" style="width:400px; float:left; margin-left:2%"> <!-- Server Features -->
<div class="well">
<h3>The Server's main Features:</h3>
<p>
<li>Economy (Duh!)</li>
<li>Custom World</li>
<li>Cities</li>
<li>Wealth based ranks</li>
<li>McMMo + Spells + Shops + More!</li>
</p>
</div>
</div> <!-- End server features -->
<div class="container">
<img src="" width="140px" height="140px" class="img-circle" />
</div>
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
</body>
</html>
我只需按钮就可以工作，我已经看了好几年了，不知道出了什么问题。我也查看了其他答案，他们没有帮助。
答案 0 :(得分：6)
我有一个类似的问题，我的旋转木马只会加载第一张图像而不会滑动。事实证明，在移动代码时，我将bootstrap.min.js脚本标记放在jquery脚本标记之上。当我在引导程序之前将jquery标记移动到加载时，它再次开始工作。
不起作用：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
工作：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
答案 1 :(得分：1)
您已包含两个jQuery个文件，您需要删除一个。
此外，您需要将div与carousel-caption类放在包含div的{{1}}内，但我不确定。
只要您不希望滑块自行移动，您也可以删除页面底部的javascript。
通过此更改，滑块似乎正常工作，您可以查看JS Bin处的代码，同时查看full screen demo
答案 2 :(得分：0)
我不是100％清楚你的具体问题是什么。但这是我用你的代码开始的小提琴。
<强>样本：
要自动滑动引导程序，您必须设置和间隔。
$('#myCarousel').carousel({
interval: 2000
});
注意：动画似乎不存在，至于为什么这是我不是100％肯定。我所知道的是，bootstrap轮播上的动画是通过CSS3过渡处理的。所以它可能是一个浏览器问题。但是，这似乎按预期工作（大部分）。
答案 3 :(得分：0)
尝试以下代码。这对我有用。
setInterval(function(){
$('.carousel').carousel('next');
}, 1000);
答案 4 :(得分：0)
我有类似的问题。 Bootstrap（v3）Carousel除了幻灯片动画外效果很好。然后意识到我是从上一个（废弃的）页面实验中加载Owl Carousel的脚本。一旦我删除了Owl Carousel脚本，Bootstrap Carousel滑动动画便开始正常工作。