bootstrap图片轮播问题

Alaska_Lee 2016-09-25 07:05:06

我用bootstrap做一个图片轮动,不知道为什么,怎么弄都没有效果，和网上的例子都一样，和而且把第二个图片设为active，前两个图片还会拼接上下排列，把第三个图片设为active，则后两个图片会上下排列，哪位大神帮忙看看,我是前端新手.图片和bootstrap、jquery都能找到



<!DOCTYPE html>

<html>

<head>

	<title>A</title>

	<meta charset="utf8">

	<meta content="text/html" http-equiv="content-type">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<link rel="stylesheet" href="/stylesheets/style.css">

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

	<link rel="stylesheet" href="/stylesheets/bootstrap-theme.css">

	<script src="/javascripts/jquery-3.1.1.min.js"></script>

	<script src="/javascripts/bootstrap.js"></script>

	<script src="/javascripts/json2.js"></script>

	<script src="/javascripts/hashtabber.js"></script>

</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">

		<div class="container">

			<div class="row">

				<div class="col-md-2">

					<div class="navbar-header">

						<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-navbar-toggle collapsed">

							<a href="#" class="navbar-brand">A</a>

						</button>

					</div>

				</div>

				<div class="col-md-3">

					<div class="navbar-collapse collapse">

						<ul class="nav navbar-nav">

							<li><a href="/">首页</a></li>

							<li><a href="/login">登录</a></li>

							<li><a href="/regist">注册</a></li>

						</ul>

					</div>

				</div>

				<div class="col-md-2 col-md-offset-5">

					<div style="float:right" class="navbar-header">

						<button type="button"><a href="#" class="navbar-brand">用户</a></button>

					</div>

				</div>

			</div>

		</div>

	</nav>

<div id="container" class="container">

	<h1>Express</h1><p>Welcome to Express</p>

	<div id="carousel" data-interval="1000" class="carousel slide">

		<ol class="carousel-indicators">

			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

			<li data-target="#carousel-example-generic" data-slide-to="1"></li>

			<li data-target="#carousel-example-generic" data-slide-to="2"></li>

		</ol>

		<div role="listbox" class="carousel-inner">

			<div clas="item active">

				<img src="/images/IMG_20160512_133927.jpg" alt="image0" class="img-responsive">

			</div>

			<div class="item">

				<img src="/images/IMG_20160512_153620.jpg" alt="image1" class="img-responsive">

			</div>

			<div class="item"><img src="/images/IMG_20160514_142855.jpg" alt="image2" class="img-responsive"></div>

		</div>

		<a href="#carousel-example-generic" role="button" data-slide="prev" class="carousel-control left">

			<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>

		</a>

		<a href="#carousel-example-generic" role="button" data-slide="next" class="carousel-control right">

			<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>

		</a>

	</div>

	<hr>

</div>

<footer class="bs-docs-footer"><div class="container"><p><a href="www.bing.com" target="_blank">A 2016</a></p></div></footer>

</body>

</html>