bootStrap的轮播
1.1如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #myslide{ width: 500px; } </style> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> <script src="bootstrap-3.3.7/js/jquery.min.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> <script src="bootstrap-3.3.7/js/docs.min.js"></script> </head> <body> <div class="container"> <div class="page-header"> <div class="h1">shithisoos <small>轮播</small></div> </div> <!--图片 --> <div class="carousel slide" id="myslide" data-ride="carousel"> <!-- 先是小圆点 --> <ol class="carousel-indicators"> <li data-target="#myslide" data-slide-to="0"></li> <li data-target="#myslide" data-slide-to="1"></li> <li data-target="#myslide" data-slide-to="2"></li> </ol> <!-- 图片 --> <div class="carousel-inner"> <div class="item active"> <img src="images/a.jpg" > <div class="carousel-caption"> 图片一 </div> </div> <div class="item "> <img src="images/b.jpg" > <div class="carousel-caption"> 图片二 </div> </div> <div class="item "> <img src="images/c.jpg" > <div class="carousel-caption"> 图片三 </div> </div> <!-- 两边的< >号 --> <a class="left carousel-control" href="#myslide" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myslide" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> <span class="sr-only">Next</span> </a> </div> </div> </div> </body> </html>
