<!DOCTYPE html>
<html>
<head>
<title>预览</title>
<meta name="referrer" content="never">
<meta data-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<!--引入资源开始-->
<link rel="stylesheet" href="css/layui.css">
<link rel="stylesheet" href="css/viewer.min.css">
<script src="css/jquery-1.9.0.js"></script>
<script src="css/viewer.min.js"></script>
<script src="css/layui.js"></script>
<!--引入资源结束-->
</head>
<body>
<style>
.bodys { width: 93%; border: 1px solid #ccc; padding: 3%; height: 29rem;}
.layui-col-md5 { width: 100% }
.layui-col-md9 { width: 82%; display: inline-block; margin-left: 3%; vertical-align: top }
.leftpart { min-height: 5rem; border-right: 1px solid #ccc; text-align: center; }
.layui-tab-title .layui-this { color: #009688; }
.layui-tab-title .layui-this:after {border-bottom-color: #009688; border-top-color: white; border-left-color: white; border-right-color: white; }
.layui-tab-title { border-bottom-style: none }
.leftpart { width: 14%; display: inline-block }
.weui-uploader__files {margin-top:.25rem; text-align: center }
.weui-uploader__file { display: inline-block }
</style>
<div class="layui-fluid" >
<div class="layui-col-md5">
<div class="layui-row grid-demo bodys">
<div class="layui-tab" lay-filter="test1" style="height: 23rem">
<!--左侧菜单开始-->
<ul class="layui-tab-title layui-col-md3 leftpart" style="height:20rem">
<li class="layui-this" lay-id="1">菜单1</li><br />
<li class="" lay-id="2">菜单2</li><br />
<li class="" lay-id="3">菜单3</li><br />
</ul>
<!--左侧菜单结束-->
<!--右侧展示图片开始-->
<div class="layui-col-md9 rightpart" style="height:20rem">
<!--展示大图开始-->
<div class="layui-carousel" id="test1">
<div carousel-item id="items"> </div>
</div>
<!--展示大图结束-->
<!--缩略图开始-->
<div style="width:100%;">
<div id="file_list">
<ul class="weui-uploader__files" id="eui-uploader">
</ul>
</div>
</div>
<br/>
<!--缩略图结束-->
<!--自定义上一页下一页开始-->
<div style="text-align:center; margin-top:1rem"> <span id="above" class="layui-btn" >上一张</span> <span id="next" class="layui-btn">下一张</span> </div>
<!--自定义上一页下一页结束-->
</div>
<!--右侧展示图片结束-->
</div>
</div>
</div>
</div>
<!--layui框架-->
<script>
layui.use(['element','carousel'], function(){
//初始化实例
var element = layui.element;
var carousel = layui.carousel;
//获取宽度
var height = '10rem;';
/********************轮播开始*************************/
//建造实例
var ins = carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,height:'65%'
,arrow: 'none' //不显示箭头
,indicator:'none'
,autoplay:false
});
//上一张
$('#above').click(function(){
ins.slide('sub');
});
//下一张
$('#next').click(function(){
ins.slide('add');
});
//获取缩略图容器
var viewer = new Viewer(document.getElementById('file_list'));
//获取进入的第一份pic
function getpic(){
//根据type来获取数据
var welfare_file_id = $('.layui-this').attr('lay-id');
//初始化缩略图容器
var str ='';
//初始化大图展示容器
var files ='';
//请求数据（数据可以ajax异步渲染）
if(welfare_file_id ==1){//菜单一
str += '<div class="layui-this" align="center" ><img style="max-height: '+height+'" src="img/1.png"></div>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/1.png" class="myui-uploader-pic"></li>';
}else if(welfare_file_id ==2){//菜单二
str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/2.png"></div>';
str += '<div align="center"><img style="max-height: '+height+'" src="img/3.png"></div>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/2.png" class="myui-uploader-pic"></li>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/3.png" class="myui-uploader-pic"></li>';
}else{//菜单三
str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/4.png"></div>';
str += '<div align="center"><img style="max-height: '+height+'" src="img/5.png"></div>';
str += '<div align="center"><img style="max-height: '+height+'" src="img/6.png"></div>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/4.png" class="myui-uploader-pic"></li>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/5.png" class="myui-uploader-pic"></li>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/6.png" class="myui-uploader-pic"></li>';
}
//数据填充
$('#items').html(str);
$('#eui-uploader').html(files);
//图片渲染
viewer.update();
//轮播重载
ins.reload({
elem: '#test1'
,width: '100%' //设置容器宽度
,height:'65%'
,arrow: 'none' //不显示箭头
,indicator:'none'
,autoplay:false
});
}
//初始化数据
getpic();
//监听Tab切换，以改变图片
element.on('tab(test1)', function(){
var id = this.getAttribute('lay-id');
//初始化缩略图容器
var str ='';
//初始化大图展示容器
var files ='';
//请求数据（数据可以ajax异步渲染）
if(id ==1){//菜单一
str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/1.png"></div>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/1.png" class="myui-uploader-pic"></li>';
}else if(id ==2){//菜单二
str += '<div class="layui-this" align="center"><img style="max-height: '+height+'" src="img/2.png"></div>';
str += '<div align="center"><img style="max-height: '+height+'" src="img/3.png"></div>';
files += '<li class="weui-uploader__file" style="padding: 0rem 0.2rem;"><img style="height: 30px;" src="img/2.png" class="myui-uploader-pic"></li>';
files += '<l
导航卡预览图片.zip （15个子文件） 
导航卡预览图片 font 
iconfont.woff2 23KB img 
3.png 26KB 1.png 16KB 6.png 31KB 5.png 27KB 4.png 24KB 2.png 27KB css layui.js 7KB layui.css 78KB jquery-1.9.0.js 261KB viewer.min.js 32KB viewer.min.css 8KB lay modules element.js 7KB carousel.js 4KB
index.html 9KB资源评论
