<!-- 1.写一个父级,class为carousel slide:添加滑动的效果 data-interval 图片轮播间隔时间,单位ms data-ride="carousel" 页面一加载后就开始播放 2.小圆点的内容放在class为carousel-indicators的层里 3.轮播图的图片区域放在class为carousel-inner的层里 每一项内容添加class为item的层 图片说明文字放在class为carousel-caption的层里 4. 左右按钮 a链接 class为carousel-control left/right 锚点指向父级 --> <div class="container"> <div id="pic" class="carousel slide" data-interval="3000" data-ride="carousel" style="width:510px;margin:0 auto;"> <!-- 小圆点 --> <ol class="carousel-indicators"> <li class=" active"></li> <li></li> <li></li> <li></li> </ol> <!--轮播图的图片 --> <div class="carousel-inner"> <div class="item active"> <img src="a.jpg" /> <div class="carousel-caption"> <h3>小孩子1</h3> </div> </div> <div class="item"> <img src="b.jpg" /> <div class="carousel-caption"> <h3>小孩子2</h3> </div> </div> <div class="item"> <img src="c.jpg" /> <div class="carousel-caption"> <h3>美女</h3> </div> </div> <div class="item"> <img src="d.jpg" /> <div class="carousel-caption"> <h3>海贼王</h3> </div> </div> </div> <!-- 左右按钮--> <a href="#pic" class="carousel-control left" data-slide="prev"> <span class="glyphicon glyphicon glyphicon-chevron-left"></span> </a> <a href="#pic" class="carousel-control right" data-slide="next"> <span class="glyphicon glyphicon glyphicon-chevron-right"></span> </a> </div> </div>
效果:
时间: 2024-09-30 23:58:21