1.在页面中添加如下代码 :
<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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- 轮播(Carousel)项目 --> <div class="carousel-inner"> <div class="item bk active" id="bk1"> <div class="carousel-caption bannerContent"> <h1>车贷申请 轻松便捷</h1> <h2>不出门在家也能申请车贷</h2> <p> <a class="btn btn-default" href="#" role="button">立即体验 <span class="glyphicon glyphicon-triangle-right"></span></a> </p> </div> </div> <div class="item bk" id="bk1"> <img src="../static/images/login/busscorp.png"> <div class="carousel-caption bannerContent"> <h1>XXXX公司</h1> <h2>优秀的理财专家</h2> <p> <a class="btn btn-default" href="#" role="button">汽车金融业务</a> <a class="btn btn-default" href="#" role="button">公司金融业务</a> </p> </div> </div> <div class="item bk" id="bk1"> <div class="carousel-caption bannerContent"> <h1>XXXXXXXXXXX公司</h1> <h2>值得信赖的金融合作伙伴</h2> <p> <a class="btn btn-default" href="#" role="button">立即联系</a> </p> </div> </div> <div class="item bk" id="bk1"> <div class="carousel-caption bannerContent"> <h1>XXXXXX</h1> <h2>值得信赖的金融合作伙伴</h2> <p> <a class="btn btn-default" href="#" role="button">立即联系</a> </p> </div> </div> </div> </div>
2.添加js调用
$(function(){ $('#myCarousel').carousel({ interval: 2000 }); });
3.引入jquery和bootstrap两个js文件
4.样式定义,页面添加如下样式
#bk1{ /*background-image: url(../images/login/banner7.png);*/ background-color: red; } #bk2{ background-image: url(../images/login/banner10.png); } #bk3{ background-image: url(../images/login/banner11.png); } #bk4{ background-image: url(../images/login/banner12.png); } .bk { width: 100%; height: 450px; position: absolute; background-position: center; } .bk img{ position: relative; left: 33%; top: 33px; } .bannerContent{ top: 50px; left: -600px; float: left; }
运行效果: