2.源码
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Bootstrap轮播</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--carousel 定义一个旋转木马的盒子-->
<!--carousel-indicators 指示点-->
<!--carousel-inner 定义切换的内容-->
<!--carousel-control 定义左右切换的控件carousel-control left左边 carousel-control right 右边-->
<!--active 选中某一个-->
<div class="carousel slide" id="carousel" >
<!--定义小圆点-->
<ol class="carousel-indicators"> <!--carousel-indicators 指示点-->
<li class="active" data-slide-to="0" data-target="#carousel"></li>
<li data-slide-to="1" data-target="#carousel"></li>
<li data-slide-to="2" data-target="#carousel"></li>
</ol>
<!--定义几个图片-->
<div class="carousel-inner">
<div class="item active">
<img src="img/banner-2.jpg"/>
</div>
<div class="item">
<img src="img/banner00.jpg"/>
</div>
</div>
<!--定义左右两边切换按钮-->
<a href="#carousel" data-slide="prev" class="carousel-control left center-block">«</a>
<a href="#carousel" data-slide="next" class="carousel-control right center-block">»</a>
</div>
<script type="text/javascript">
$(function(){
$('#carousel').carousel({
interval:2000
})
})
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
