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'], function() {
			var table = layui.table,
				upload = layui.upload;

			var list = ${list};
			console.log(list)

			if(list.length > 0){
				$(".bannerShow").show()
				$(".nodata").hide()
			}else{
				$(".nodata").show()
				$(".bannerShow").hide()
			}

			//上传图片
			upload.render({
				url: '/zzhnc/upload/UploadImg',
				elem: '.uploadImg',
				method: 'post',
				done: function(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() {
				$(this).parent().remove();
			})

		})
	</script>

</html>