bootstrap轮播图

来源：互联网发布：java工作内容编辑：程序博客网时间：2024/06/06 00:08
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><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）项目 --><div class="carousel-inner"><div class="item active"><img src="img/1.jpg" alt="First slide"></div><div class="item"><img src="img/2.jpg" alt="Second slide"></div><div class="item"><img src="img/3.jpg" alt="Third slide"></div></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"    data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel"    data-slide="next">›</a></div> <scripttype="text/javascript">$('#myCarousel').carousel({interval:1000});</script></body></html>
阅读全文
0 0