zoomla
Version:
16年专业研发|中文alexa排名第一的CMS品牌-基于dotNET core、功能强大，集成站群、微信开发、小程序与ERP及OA办公系统，支持国际语言和多民族语言，世界五百强与大型门户专用高端网站内核CMS系统
220 lines (218 loc) • 9.77 kB
HTML
{ZL.Source id="图库模型数据源标签"/}
<html>
<head>
<meta charset="utf-8">
<title>{SField sid="图库模型数据源标签" FD="Title" page="0"/}_{$SiteName/}</title>
<meta name="Keywords" content="{SField sid="图库模型数据源标签" FD="Tagkey" page="0"/}">
{ZL:Boot4()/}
<link href="{$CssDir/}global.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet"/>
<script src="/js/scrolltopcontrol.js" type="text/javascript"></script>
<script src="/JS/Controls/B_User.js"></script>
<script src="{$CssDir/}js/server.js"></script>
<style>
.navbar-light{background: #e4e4e4;}
#Menu{SField sid="图库模型数据源标签" FD="NodeID" page="0"/} a { background:#e7e7e7; max-width:inherit;}
.content_pics { position:relative; width:100%; height:110px; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; border:1px solid #ddd; overflow:hidden;}
.content_pics #prev_small{ display:block; position:absolute; top:0; left:0; bottom:0; padding-top:20px; width:30px; font-size:3em; color:#fff; background:#000;}
.content_pics #next_small{ display:block; position:absolute; top:0; right:0; bottom:0; padding-top:20px; width:30px; font-size:3em; color:#fff; background:#000;}
.content_pics ul{ margin-left:30px; width:500%;}
.content_pics li{ float:left; margin-left:2px; margin-right:2px; width:150px; height:100px;}
.content_pics li img{ padding:2px; width:100%; height:100%; cursor:pointer;}
.content_pics li.active img{ border:1px solid #f00;}
.show_pic{ position:relative;}
.pics_set{ position:absolute; right:0; top:-40px; background:rgba(0,0,0,0.6); z-index:99; border-radius:50%;}
.pics_set a{ float:right; display:block; width:40px; height:40px; font-size:2em; background:#000; color:#fff; border-radius:50%; text-align:center;}
.show_pic .pic_detail{ position:absolute; bottom:11rem; margin-bottom:0; width:100%; min-height:30px; padding:20px;}
.show_pic #prev_pic{ position:absolute; top:0; left:0; bottom:0; height:100%; width:50%; font-size:10em; color:#fff; }
.show_pic #prev_pic i { position:absolute; top:50%; left:10px; margin-top:-70px; color:#3095e4; display:none;}
.show_pic #next_pic i { position:absolute; top:50%; right:10px; margin-top:-70px; color:#3095e4; display:none;}
.show_pic a:hover{ text-decoration:none;}
.show_pic #next_pic{ position:absolute; top:0; right:0; bottom:0; width:50%; height:100; font-size:10em; color:#fff;}
.pic_detail span { font-style:italic; font-size:1.5em; color:#333;}
.pic_detail span strong{ color:#f00; font-size:1.4em;}
.pics_content_lt h1 { font-size:24px; text-align:center;}
.pics_content_lt p { margin-bottom:20px; text-align:center; color:#999;}
.pics_content_lt p span { margin-left:5px; margin-right:5px;}
.pics_content_lc { padding:20px; text-align:justify; text-justify:inter-ideograph; overflow:hidden;}
#cur_pic { display:block; position:absolute; top:50%; left:50%;}
.show_pic h1 { padding-left:92px; padding-right:92px; font-size:26px; color:#000; width:100%; z-index:1200;}
.show_pic h1 span { float:right; margin-left:5px; font-size:14px;}
.show_pic h1 span a { display:block; padding:6px 10px; background:#FBFBFB; border:1px solid #ddd; border-radius:4px; color:#000;}
.show_pic h1 span a i { color:#2D8CD7;}
.show_pic h1 span a:hover { color:#fff; background:#47A8F3;}
.show_pic h1 span a:hover i { color:#fff;}
#home_nav { position: relative;}
</style>
</head>
<body id="header">
{ZL.Label id="全站头部"/}
<div class="pics_body">
<div class="show_pic" style="height:100vh;">
<h1 style="position:absolute; top:100px;">{SField sid="图库模型数据源标签" FD="Title" page="0"/} <span><a href="#"><i class="zi zi_comment"></i> 15615评论</a></span><span><a href="#"><i class="zi zi_sharesquare"></i> 我要分享</a></span></h1>
<div class="" style="height:100%;"><img id="cur_pic" src="" class="center-block img-responsive" data-target="" alt="" /></div>
<div class="pic_detail">
<span><strong></strong>/<span></span></span>
<span id="pic_detail_c"></span>
</div>
<a href="javascript:;" id="prev_pic"><i class="zi zi_forLeft"></i></a>
<a href="javascript:;" id="next_pic"><i class="zi zi_forRight"></i></a>
</div>
<div class="content_pics" style="position:absolute; bottom:0; width:100%;">
<a href="javascript:;" id="prev_small"><i class="zi zi_doubleLeft"></i></a>
<a href="javascript:;" id="next_small"><i class="zi zi_doubleRight"></i></a>
<ul class="list-unstyled" id="content_pics">
<script>
var json = '{SField sid="图库模型数据源标签" FD="PhotoUrl" page="0"/}'
var jsonArr= eval(json);
$("#cur_pic").attr("src","/UploadFiles/"+jsonArr[0].url);//
$("#cur_pic").attr("data-target",0);
$(".pic_detail #pic_detail_c").text(jsonArr[0].desc);
$(".pic_detail span").find("span").text(jsonArr.length);
$(".pic_detail span").find("strong").text(1);
for(var i=0; i<jsonArr.length; i++){
document.write("<li><img src=/UploadFiles/"+jsonArr[i].url+" class='center-block img-responsive pitem' data-target='"+i+"' alt="+jsonArr[i].desc+"></li>");///UploadFiles/
}
$(".content_pics li").eq(0).addClass("active");
console.log(jsonArr)
</script>
</ul>
</div>
</div>
<script>
setTimeout("ImgFun()",0)
function ImgFun()
{
$("#cur_pic").css("margin-top","-"+($("#cur_pic").height()/2)+"px");
$("#cur_pic").css("margin-left","-"+($("#cur_pic").width()/2)+"px");
}
//小图点击切换
$(".pitem").click(function(e) {
var url=$(this).attr("src");
var con=$(this).attr("alt");
$("#cur_pic").attr("src",url);
$("#cur_pic").css("margin-top","-"+($("#cur_pic").height()/2)+"px")
$("#cur_pic").css("margin-left","-"+($("#cur_pic").width()/2)+"px")
$(".show_pic").find("p").text(con);
$(".content_pics li").removeClass("active");
$(this).parent().addClass("active");
});
//大图左右方向键的显示/隐藏
$(".show_pic>a").mouseover(function(e) {
$(this).find("i").show();
}).mouseout(function(e) {
$(this).find("i").hide();
});;
var run = document.getElementById("content_pics"); //容器ID
var slength = $(".content_pics").find("img").innerWidth(); //每个小图的宽度
var clength= $(".content_pics").innerWidth(); //小图列表所属容器的宽度
var index; //当前大图的下标
var idnam; //按钮名称
var initleft=30; //初始化离左距离
var marginleftn; //往左偏移量
$(".show_pic>a").click(function(e) {
idname=$(this).attr("id");
index=$("#cur_pic").attr("data-target");
index=parseInt(index)
if(idname=="prev_pic"){ //判断是上一张还是下一张
if(index-1<0) index=jsonArr.length-1;//已经是第一张时，则跳转最后一张图片
else index=index-1;
}
else{
if(index+1>jsonArr.length-1) index=0;//已经是最后一张时，则跳转第一张图片
else index=index+1;
}
$("#cur_pic").attr("src","/UploadFiles/"+jsonArr[index].url);//
$("#cur_pic").attr("data-target",index);
$("#cur_pic").css("margin-top","-"+($("#cur_pic").height()/2)+"px")
$("#cur_pic").css("margin-left","-"+($("#cur_pic").width()/2)+"px")
$(".content_pics li").removeClass("active");
$(".content_pics li").eq(index).addClass("active");
$(".pic_detail #pic_detail_c").html(jsonArr[index].desc);
$(".pic_detail span").find("strong").text(index+1);
if(index+1>clength/slength){
marginleftn = (index+1)*slength-clength;
}//当前选中的小图离左侧的距离大于小图列表所属容器宽时，则列表往左挪移1个图片的宽度
else{
marginleftn = initleft; //对应初始化离左边的距离
}
run.style.marginLeft="-"+marginleftn+"px";//小图列表往左偏移的像素
});
//当图片列表总长小于或等于其容器宽时，隐藏小图的左右键
$().ready(function(e) {
var count=$(".content_pics").find("img").length;
if(count<clength/slength+1){
$("#prev_small").hide();
$("#next_small").hide();
$(".content_pics ul").css({
marginLeft:0,
})
initleft=0;
}
});
//小图列表的左右键点击事件
$("#prev_small").click(function(e) {
$(".show_pic #prev_pic").click();
});
$("#next_small").click(function(e) {
$(".show_pic #next_pic").click();
});
//左右方向键浏览图片
document.onkeydown=function(e){
e=window.event||e;
if(e.keyCode==37){
$(".show_pic #prev_pic").click();
}
if(e.keyCode==39){
$(".show_pic #next_pic").click();
}
}
//自动播放
var timer = null;
$("#play").click(function(e) {
var play=$(this).find(".fa-play");
if(play.length>0){
$(this).find("i").removeClass("fa-play");
$(this).find("i").addClass("fa-pause");
timer = setInterval(function(){
$(".show_pic #next_pic").click();
},5000)
}
else{
$(this).find("i").removeClass("fa-pause");
$(this).find("i").addClass("fa-play");
clearInterval(timer);
}
});
var buser = new B_User();
buser.IsLogged(function(data,flag){
if(flag)
{
data=JSON.parse(data);
$(".nav_user>a").html(data.UserName+"的会员中心");
$(".nav_user .dropdown-menu li:nth-child(1) a").html("会员中心");
$(".nav_user .dropdown-menu li:nth-child(2)").remove();
}
});
$(window).scroll(function(){
if($(window).scrollTop()>0){
$("#home_nav").css("position","fixed").addClass("active")
}
else{
$("#home_nav").css("position","relative").removeClass("active");
}
});
/*显示搜索框*/
function isSearch(){
$(".home_search").css("opacity","1").css("z-index","1").css("right","0").css("top","0.5rem");
$(".home_top_nav").fadeOut(200);
$(".home_search .form-control").focus();
}
/*关闭搜索框*/
function isClose(){
$(".home_search").css("opacity","0").css("z-index","-1").css("right","-1em");
$(".home_top_nav").fadeIn(1000);
}
</script>
</body>
</html>