1.CSS 和JS
- bootstrap.min.css
- jquery.min.js
- bootstrap.min.js
2.用background-image属性代替img标签
在使用的时候发现将图片放在img标签中会出现不居中显示的问题
而将img标签的style添加
width:100%会出现图片过大显示不完整
而div的background-image属性可以完美解决这些问题
<style>
.carousel-inner .item{
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
</style>
<script>
$(function(){
$.get("getCourtCerts.action",{bdhm:"${param.bdhm}"},function(data){
if(data.success){
var certs=data.data;
$("#pic1").css("background-image","url(data:image/jpeg;base64,"+certs.gzz+")");
$("#pic2").css("background-image","url(data:image/jpeg;base64,"+certs.gwz+")");
}else{
$.cusalert({title:'失败',content:data.errorMsg,type:'error'});
}
});
$("#myCarousel").carousel({
interval: 2000
});
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
})
</script>
</head>
<body>
<input id="authId" type="hidden" value="${param.AUTHID }"></input>
<input id="bdhm" type="hidden" value="${param.bdhm}"></input>
<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>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active" id="pic1">
<div class="carousel-caption">
<h3>工作证</h3>
</div>
</div>
<div class="item" id="pic2">
<div class="carousel-caption">
<h3>公务证</h3>
</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- 控制按钮 -->
<div style="text-align:center;" hidden="hidden">
<input type="button" class="btn start-slide" value="开始播放">
<input type="button" class="btn pause-slide" value="暂停播放">
<input type="button" class="btn prev-slide" value="上一页">
<input type="button" class="btn next-slide" value="下一页">
<input type="button" class="btn slide-one" value="工作证">
<input type="button" class="btn slide-two" value="公务证">
<input type="button" class="btn slide-three" value="文书内容">
</div>
</body>
</html>
这里的图片直接用的是数据库中取出的base64编码过后的
