旋转木马不会从一张图片滑到另一张图片. 这是我的代码： !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"he
这是我的代码：
<!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>
我只需要按钮工作,我已经看了很久,并不知道出了什么问题.我也看了其他答案,他们没有帮助.
你已经包含了两个jQuery文件,你需要删除一个.此外,你需要在包含项目的div中放置带有类旋转木马标题的div,尽管我不确定.
只要您不希望滑块自行移动,您也可以删除页面底部的javascript.
有了这个变化,滑块似乎正常工作,你可以看一下JS Bin的代码,也看看full screen demo