WebContent/WEB-INF/jsp/pc/banner/bannerList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>首页banner设置</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
		<style>
			.bannerShow .item {
				width: 300px;
				height: 200px;
				position: relative;
				display: inline-block;
				margin-right: 16px;
				margin-bottom: 16px;
			}
			
			.bannerShow .item img {
				width: 100%;
				height: 100%;
			}
			
			.bannerShow .item:hover #deleteBtn {
				display: inline-block;
			}
			
			.bannerShow .item #deleteBtn {
				position: absolute;
				right: -20px;
				top: -20px;
				font-size: 50px;
				color: red;
				display: none;
			}
		</style>
	</head>

	<body class="wrap">
		<button class="layui-btn uploadImg"><i class="layui-icon">&#xe61f;</i> 上传banner图</button>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>banner图片展示</legend>
		</fieldset>
		<div class="bannerShow">
		
		</div>
		<div class="nodata">暂无banner图，请上传banner图片。</div>
	</body>
	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/zzhnc/res/js/me.js"></script>
	<script>
		layui.use(['table', 'upload', 'layer'], function() {
			var table = layui.table,
				upload = layui.upload,
				layer = layui.layer;

			//上传图片
			upload.render({
				url: '/zzhnc/upload/UploadImg',
				elem: '.uploadImg',
				method: 'post',
				done: function(res) {
					if(res.code == 0) {
						$.post("/zzhnc/banner/add",{
							url: res.data
						}, function(res){
							console.log(res)
							if(res.code == 0){
								$(".bannerShow").show()
								$(".nodata").hide()
								var str = '<div class="item">' 
									+ '<img src="' + res.data + '" />' 
									+ '<i class="layui-icon" id="deleteBtn">&#x1007;</i>' 
									+ '</div>';
								$(".bannerShow").append(str);
							}
						})
					}
				}
			});
			
			//删除banner图
			$(document).on("click", "#deleteBtn", function() {
				var id = $(this).data("id");
				$.get("/zzhnc/banner/"+ id +"/delete", "", function(res){
					console.log(res)
					if(res.code == 0){
						layer.alert('删除成功！'); 
					}else{
						layer.alert('删除失败！'); 
					}
				})
			})

		})
	</script>

</html>