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編碼過后的
