use*_*325 3 css jquery carousel twitter-bootstrap
旋转木马不会从一张图片滑到另一张图片.
这是我的代码:
<!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>
我只需要按钮工作,我已经看了很久,并不知道出了什么问题.我也看了其他答案,他们没有帮助.
我有一个类似的问题,我的旋转木马只会加载第一个图像,不会滑动.事实证明,在移动代码时,我将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>