相册

//弹出boatspic.jsp
function
bigPic(){ var ajaxObj = { url : contextPath+"/business/boatsbaseinfo/findsgzcbTpById.do", data:{id:gzcbid_tp}, sucF : function(data) { if(data!=null || data!=""){ var url = encodeURI(contextPath+"/business/boats/boatspic.jsp?id="+gzcbid_tp+"&data="+data); top.openDialog(url,{id:"swzhoto",height:500,1050,title:"查看照片"}); // window.open("bbjmphoto.html"); }else{ alert("暂无图片"); } } }; App.ajax(ajaxObj); }
//boatspic.jsp页面
<%@page import="bios.report.hazelnut.id"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%
	String contextPath = request.getContextPath();
	String id = request.getParameter("id");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0037)http://www.cjienc.com/gis/search.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片轮播</title>
<head>
	<link href="/njszhd/webfront/css/szhd/nj_szhd.css" rel="stylesheet" />
	<link href="/njszhd/webfront/css/style.css" rel="stylesheet" />
	<link href="css/newsdetail.css" rel="stylesheet" type="text/css"></link>
	<script src="/njszhd/webfront/js/jquery-1.8.3.min.js" type="text/javascript"></script>
   <script src="<%=contextPath %>/assets/bootstrap/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="<%=contextPath%>/assets/artDialog/jquery.artDialog.js?skin=default"></script>
	<script type="text/javascript" src="<%=contextPath%>/assets/artDialog/iframeTools.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/webfront/js/jquery.getParmByUrl.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/webfront/js/jquery.getParmByUrl.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/webfront/js/scripts.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/webfront/js/scripts-ext.js"></script>
	<script src="js/boatspic.js" type="text/javascript"></script>
	<script type="text/javascript">var contextpath='<%=contextPath%>';</script>

</head>
<body>
<center>

<div class="detail_context_pic">
	<div class="detail_context_pic_top">
		<a href="#"><img src="<%=contextPath%>/business/boatsbaseinfo/getBeaconPictureAll.do?id=<%=id%>,0" alt="" id="pic1" curindex="0" style="max- 600px;max-height: 340px"/></a> <a id="preArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="preArrow_A"></span></a> <a id="nextArrow" href="javascript:void(0)" class="contextDiv" title="上一张"><span id="nextArrow_A" style="display: none;"></span></a> 
		<div id="miaoshuwarp">
			<div class="miaoshu"> </div>
		</div>
	</div>
<!--图片轮播-->
	<div class="detail_context_pic_bot" style="position:absolute;height:120px;z-index:2008;bottom:10px;">
		<div class="detail_picbot_left">
			<a href="javascript:void(0)" id="preArrow_B"><img src="image/left1.jpg" alt="上一个"></a> 
		</div>
		<div class="detail_picbot_mid">
			<ul id = "tplb">
				
                   
			</ul>
		</div>
		<div class="detail_picbot_right">
			<a href="javascript:void(0)" id="nextArrow_B"><img src="image/right1.jpg" alt="下一个"/></a> 
		</div>
		
	</div>
</div>
<!--图片轮换结束-->
</center>
</body></html>


/*通用newsdetail.css*/
body,h1,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,figure{ margin:0px; padding:0px;}
body,button,input,select,textarea{ font-family:"微软雅黑";font-size:12px; }
.clearleft{clear:left;}
.clearright{clear:right}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
p,ul,li,dl,dd,dt,form,h1,h2,h3,h4,h5,h6{list-style:none;}
img{border:none;}
a{outline:none;blr:expression(this.onFocus=this.blur());text-decoration:none;color:Black;}
a:hover{ color:#ff5d11; text-decoration:underline;}
img:hover{background: white;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8; opacity: 0.8;}

/*图片轮播*/
.detail_context_pic{680px;margin-top:20px;margin-bottom:20px;overflow:hidden;}
.detail_context_pic_top{680px;overflow:hidden;text-align:center;position:relative;z-index:1;}
.detail_context_pic_bot{680px;height:107px;overflow:hidden;margin-top:20px;}
.detail_picbot_left{float:left;30px;height:107px;overflow:hidden;}
.detail_picbot_left a{display:block;30px;height:107px;}
.detail_picbot_mid{float:left;620px;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;height:77px;overflow:hidden;padding-top:15px;padding-bottom:13px;}
.detail_picbot_mid ul{height:77px;620px;overflow:hidden;position:relative;}
.detail_picbot_mid ul li{float:left;height:77px;margin-left:25px;display:inline;94px;text-align:center;overflow:hidden;position:relative;}
.detail_picbot_mid ul li img{height:73px;max-90px;}
#pic1{max-680px;}
.selectpic{border:2px solid red;}
.detail_picbot_right{float:left;30px;height:107px;overflow:hidden;}
.detail_picbot_right a{display:block;30px;height:107px;}
#preArrow{left:0px;}
#nextArrow{right:0px;}
.contextDiv{cursor:pointer;height:100%;50%;position:absolute;top:0px;z-index:5;background:url("blank") repeat;}
.contextDiv span{position:absolute;top:50%;margin-top:-20%;39px;height:50px;}
#preArrow_A{left:16px;background:url('images/left1.jpg') no-repeat;display:none;}
#nextArrow_A{right:16px;background:url('images/left1.jpg') no-repeat;display:none;}

#miaoshuwarp{position:relative;bottom:0;z-index:1;680px;text-align:left;}
.miaoshu{position:absolute;660px; padding:0 10px; bottom:0;height:30px; line-height:30px;color:White;font-size:14px;z-index:3;background:url("images/bcgL.png") repeat-x; font-family:"宋体";}

.bodymodal{100%;height:100%;overflow:hidden;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;z-index:1100;position:fixed;top:0px;left:0px;display:none;}
.firsttop_left{300px;height:250px;margin-right:30px;overflow:hidden;float:left;}
.firsttop_right{float:left;270px;overflow:hidden;}
.close2{height:17px;}
.close2 a{background:url('images/close.jpg') 0px 0px no-repeat;15px;height:15px;display:block;float:right;}
.replay{height:24px;margin-top:20px;overflow:hidden;}
.replay h2{float:left;font-size:16px;}
.replay p{float:left;margin-left:15px;display:inline;line-height:24px;padding-right:25px;background:url('images/replay.png') right no-repeat;}
.replay p a{color:white;font-size:14px;}
.replay p a:hover{color:#FF702D;text-decoration:underline;}
.pictwo{270px;height:88px;overflow:hidden;margin-top:20px;}
.pictwo ul li{120px;height:88px;float:left;margin-right:15px;position:relative;overflow:hidden;}
.pictwo ul li img{120px;height:88px;}
.imgdivtext{position:absolute;bottom:0px;height:25px;120px;background:rgba(0, 0, 0, 0.6);line-height:25px;text-align:center;left:0px;z-index:4;*background:#000;*filter:alpha(opacity=50);}
.imgdivtext a{color:White;font-size:14px;font-weight:bold;}
.imgdivtext a:hover{color:#FF702D;text-decoration:underline;}
.returnbtn {margin-top:35px;margin-left:50px;}
.returnbtn a{115px;height:22px;border:1px solid #ccc;padding:5px 15px;line-height:22px;text-align:center;color:White;font-size:16px;display:block;}
.returnbtn a:hover{color:#FF702D;border:1px solid #8d5a00;}
.firsttop{600px;padding:20px;background:#1C1C1C;position:fixed;top:170px;left:0px;z-index:1200;color:White;display:none;}
.endtop{600px;padding:20px;background:#1C1C1C;position:fixed;top:170px;left:0px;z-index:1200;color:White;display:none;}
@RequestMapping(value = "/getBeaconPictureAll.do", method = RequestMethod.GET)
	@ResponseBody
	public void getBeaconPictureAll(String id,HttpServletResponse response) throws IOException {
			String id1 = id.split(",")[0];
			int index = Integer.valueOf(id.split(",")[1]);
			
			List<GzcbPic> list = getBoatsBaseInfoService().getPictureAll(id1);
			response.setContentType("image/jpeg");
			FileInputStream fis = null;
			OutputStream os = null;
			try {
				fis = new FileInputStream(list.get(Integer.valueOf(index)).getTplj());
				os = response.getOutputStream();
				int count = 0;
				byte[] buffer = new byte[1024 * 8];
				while ((count = fis.read(buffer)) != -1) {
					os.write(buffer, 0, count);
				}
				
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				try {
					os.flush();
					fis.close();
					os.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
	}
	
	
	/**
	 * 查询工作船舶图片 判断是否有图片
	 */
	@RequestMapping(value = "/findsgzcbTpById.do", method = RequestMethod.POST)
	@ResponseBody
	public int findswztpById(String id){
		return getBoatsBaseInfoService().findsgzcbtpById(id).size();
	}
 
原文地址:https://www.cnblogs.com/sily-boy/p/5310100.html