bootstrap2轮播

来源:互联网 发布:中云数据有限公司 编辑:程序博客网 时间:2024/04/30 17:20

感觉没有bs3的效果好看,明天开始学习bs3。


<!doctype html><html><head><meta charset="utf-8"><title>bootstrap轮播</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/bootstrap-carousel.js"></script><script type="text/javascript">$('.carousel').carousel({  interval: 2000})</script></head><body><div class="row"><div class="span6"><div id="myCarousel" class="carousel slide">  <ol class="carousel-indicators">    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <li data-target="#myCarousel" data-slide-to="1"></li>    <li data-target="#myCarousel" data-slide-to="2"></li>  </ol>  <!-- Carousel items -->  <div class="carousel-inner">v     <div class="active item"><img src="http://v2.bootcss.com/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""></div>    <div class="item"><img src="http://v2.bootcss.com/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""></div>    <div class="item"><img src="http://v2.bootcss.com/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""></div>  </div>  <!-- Carousel nav -->  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div></div></div></body></html>


原创粉丝点击