查看相册
效果图(1)
规划图(3)
标题图(1)
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + currentLiTag;
var tmpDivNode = $(document.createElement('div'));
var videoNode = $(document.createElement('video'));
videoNode.prop('src', imgs[currentLiTag][0]['videoUrl']);
videoNode.prop('poster', imgs[currentLiTag][0]['fileName']);
videoNode.prop('autoplay', 'autoplay');
videoNode.prop('controls', 'controls');
videoNode.prop('muted', true);
videoNode.css('width', '600px');
videoNode.css('height', '338px');
tmpDivNode.append(videoNode)
$('#layui-img-id').append(tmpDivNode);
$('.albumButton').hide()
} else if (currentLiTag == 100) {
// 轮播div
var loopDivNode = document.createElement('div');
loopDivNode.setAttribute('id', "loop" + currentLiTag);
loopDivNode.setAttribute('class', "layui-carousel");
// 元素 div
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + currentLiTag;
var tmpDivNode = $(document.createElement('div'));
var videoNode = $(document.createElement('iframe'));
videoNode.prop('src', imgs[currentLiTag][0]['videoUrl']);
videoNode.css('width', '600px');
videoNode.css('height', '338px');
tmpDivNode.append(videoNode)
$('#layui-img-id').append(tmpDivNode);
$('.albumButton').hide()
} else {
// 轮播div
var loopDivNode = document.createElement('div');
loopDivNode.setAttribute('id', "loop" + currentLiTag);
loopDivNode.setAttribute('class', "layui-carousel");
// 元素 div
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + currentLiTag;
$('#loopId').attr("value", loopId);
// 图片时增加初始化轮播效果
$.each(imgs[currentLiTag], function (i, v) {
var tmpDivNode = document.createElement('div');
var imgNode = document.createElement('img');
imgNode.setAttribute('src', imgs[currentLiTag][i]['fileName']);
imgNode.style.maxWidth = '600px';
imgNode.style.maxHeight = '338px';
tmpDivNode.append(imgNode);
$('#layui-img-id').append(tmpDivNode);
})
if (currentLiTag == 99) {
$('#liveK').show()
}
$('.albumButton').show()
}
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#'+loopId
,width: '100%'
,height: '100%'//设置容器宽度
,arrow: 'always' //始终显示箭头
,indicator: 'none'
,autoplay: false
});
});
}
});
// 标记目前显示的图集
showImg = JSON.stringify(showImg);
$('.select-ul').attr('data-item', showImg);
// 点击效果
$('.f').on('click', {loopId:loopId}, function () {
var showTags = $.parseJSON($('.select-ul').attr('data-item'));
var showTagsLen = showTags.length;
var currentNode = $('*[is-current]')[0];
var prevNode = $('*[is-current]').prev();
var prevDataTag = $(prevNode[0]).attr('data-tag');
//视频或者图片会有一项
var currentImg = $('#layui-img-id').children('img');
var currentVideo = $('#layui-img-id').children('video');
if (prevDataTag == undefined) {
// 当前节点为第一个，无法往前
return;
}
$(currentNode).removeAttr('is-current'); //移除当前标记
$(currentNode).children('span')[0].style.backgroundColor = 'rgba(0,0,0,0.5)'; // 当前节点span背景色还原
$(prevNode[0]).attr('is-current', '1'); //向上一个同胞元素增加样式效果
$(prevNode[0]).children('span')[0].style.backgroundColor = 'rgba(0,151,255,1)';//向上一个同胞元素增加样式效果
// 图片元素覆盖
if (prevDataTag == 11) {
// var videoNode = document.createElement('video');
// videoNode.setAttribute('src', imgs[prevDataTag][0]['videoUrl']);
// videoNode.setAttribute('poster', imgs[prevDataTag][0]['fileName']);
// videoNode.setAttribute('autoplay', "autoplay");
// videoNode.setAttribute('controls', "controls");
// videoNode.setAttribute('muted', true);
// videoNode.style.width = '600px';
// videoNode.style.height = '338px';
var videoNode = $(document.createElement('video'));
videoNode.prop('src',imgs[prevDataTag][0]['videoUrl'] );
videoNode.prop('poster',imgs[prevDataTag][0]['fileName'] );
videoNode.prop('autoplay', 'autoplay');
videoNode.prop('controls', 'controls' );
videoNode.prop('muted', true);
videoNode.css('width', '600px' );
videoNode.css('height', '338px' );
$('#layui-img-id').empty()
$('#layui-img-id').append(videoNode);
$('.albumButton').hide()
} else if (prevDataTag == 100) {
// 轮播div
var loopDivNode = document.createElement('div');
loopDivNode.setAttribute('id', "loop" + prevDataTag);
loopDivNode.setAttribute('class', "layui-carousel");
// 元素 div
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + prevDataTag;
var tmpDivNode = $(document.createElement('div'));
var videoNode = $(document.createElement('iframe'));
videoNode.prop('src', imgs[prevDataTag][0]['videoUrl']);
videoNode.css('width', '600px');
videoNode.css('height', '338px');
tmpDivNode.append(videoNode)
$('#layui-img-id').append(tmpDivNode);
$('.albumButton').hide()
} else {
// 轮播div
var loopDivNode = document.createElement('div');
loopDivNode.setAttribute('id', "loop" + prevDataTag);
loopDivNode.setAttribute('class', "layui-carousel");
// 元素 div
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + prevDataTag;
$('#loopId').attr("value", loopId);
// $('#layui-img-id').empty()
$.each(imgs[prevDataTag], function (i, v) {
var tmpDivNode = document.createElement('div');
var imgNode = document.createElement('img');
imgNode.setAttribute('src', imgs[prevDataTag][i]['fileName']);
imgNode.style.maxWidth = '600px';
imgNode.style.maxHeight = '338px';
tmpDivNode.append(imgNode);
$('#layui-img-id').append(tmpDivNode);
})
if (prevDataTag == 99) {
$('#liveK').show()
}
$('.albumButton').show()
}
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#'+loopId
,width: '100%'
,height: '100%'//设置容器宽度
,arrow: 'always' //始终显示箭头
,indicator: 'none'
,autoplay: false
});
});
var flag = ($(prevNode[0]).css('display') == 'none');
//下一个元素如果display为none需要交换状态
if (showTagsLen == 5 && flag) {
var popItem = showTags.pop();
$(prevNode[0]).removeClass('selected-item-none');
$(prevNode[0]).removeClass('selected-item');
$('*[data-tag='+popItem+']').removeClass('selected-item-none');
$('*[data-tag='+popItem+']').removeClass('selected-item');
$(prevNode[0]).addClass('selected-item');
$('*[data-tag='+popItem+']').addClass('selected-item-none');
showTags.unshift($(prevNode[0]).attr('data-tag'));
showTags = JSON.stringify(showTags);
$('.select-ul').attr('data-item', showTags);
}
});
$('.l').on('click', {loopId:loopId}, function () {
var showTags = $.parseJSON($('.select-ul').attr('data-item'));
var showTagsLen = showTags.length;
var currentNode = $('*[is-current]')[0];
var nextNode = $('*[is-current]').next();
var nextDataTag = $(nextNode[0]).attr('data-tag');
var currentImg = $('#layui-img-id').children('img');
var currentVideo = $('#layui-img-id').children('video');
if (nextDataTag == undefined) {
// 当前节点为第一个，无法往前
return;
}
$(currentNode).removeAttr('is-current'); //移除当前标记
$(currentNode).children('span')[0].style.backgroundColor = 'rgba(0,0,0,0.5)'; // 当前节点span背景色还原
$(nextNode[0]).attr('is-current', '1'); //向上一个同胞元素增加样式效果
$(nextNode[0]).children('span')[0].style.backgroundColor = 'rgba(0,151,255,1)';//向上一个同胞元素增加样式效果
// 图片元素覆盖
currentImg.attr('src', imgs[nextDataTag][0]['fileName']);
if (nextDataTag == 11) {
// var videoNode = document.createElement('video');
// videoNode.setAttribute('src', imgs[nextDataTag][0]['videoUrl']);
// videoNode.setAttribute('poster', imgs[nextDataTag][0]['fileName']);
// videoNode.setAttribute('autoplay', "autoplay");
// videoNode.setAttribute('controls', "controls");
// videoNode.setAttribute('muted', true);
// videoNode.style.width = '600px';
// videoNode.style.height = '338px';
var videoNode = $(document.createElement('video'));
videoNode.prop('src',imgs[nextDataTag][0]['videoUrl'] );
videoNode.prop('poster',imgs[nextDataTag][0]['fileName'] );
videoNode.prop('autoplay', 'autoplay');
videoNode.prop('controls', 'controls' );
videoNode.prop('muted', true);
videoNode.css('width', '600px' );
videoNode.css('height', '338px' );
$('#layui-img-id').empty()
$('#layui-img-id').append(videoNode);
$('.albumButton').hide()
// currentVideo.attr('src', imgs[prevDataTag][0]['videoUrl']);
} else if (nextDataTag == 100) {
// 轮播div
var loopDivNode = document.createElement('div');
loopDivNode.setAttribute('id', "loop" + nextDataTag);
loopDivNode.setAttribute('class', "layui-carousel");
// 元素 div
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + nextDataTag;
var tmpDivNode = $(document.createElement('div'));
var videoNode = $(document.createElement('iframe'));
videoNode.prop('src', imgs[nextDataTag][0]['videoUrl']);
videoNode.css('width', '600px');
videoNode.css('height', '338px');
tmpDivNode.append(videoNode)
$('#layui-img-id').append(tmpDivNode);
$('.albumButton').hide()
} else {
var loopDivNode = document.createElement('div');
loopDivNode.setAttribute('id', "loop" + nextDataTag);
loopDivNode.setAttribute('class', "layui-carousel");
// 元素 div
var itemDivNode = document.createElement('div');
itemDivNode.setAttribute('id', "layui-img-id");
itemDivNode.setAttribute('carousel-item', null);
itemDivNode.style.position = "relative";
// 追加
loopDivNode.append(itemDivNode);
$('.loop').empty()
$('.loop').append(loopDivNode)
loopId = "loop" + nextDataTag;
$('#loopId').attr("value", loopId);
$.each(imgs[nextDataTag], function (i, v) {
var tmpDivNode = document.createElement('div');
var imgNode = document.createElement('img');
imgNode.setAttribute('src', imgs[nextDataTag][i]['fileName']);
imgNode.style.maxWidth = '600px';
imgNode.style.maxHeight = '338px';
tmpDivNode.append(imgNode);
$('#layui-img-id').append(tmpDivNode);
})
if (nextDataTag == 99) {
$('#liveK').show()
}
$('.albumButton').show()
}
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#'+loopId
,width: '100%'
,height: '100%'//设置容器宽度
,arrow: 'always' //始终显示箭头
,indicator: 'none'
,autoplay: false
});
});
var flag = ($(nextNode[0]).css('display') == 'none');
//下一个元素如果display为none需要交换状态
if (showTagsLen == 5 && flag) {
var shiftItem = showTags.shift();
//移除所有样式
$(nextNode[0]).removeClass('selected-item-none');
$(nextNode[0]).removeClass('selected-item');
$('*[data-tag='+shiftItem+']').removeClass('selected-item-none');
$('*[data-tag='+shiftItem+']').removeClass('selected-item');
$(nextNode[0]).addClass('selected-item');
$('*[data-tag='+shiftItem+']').addClass('selected-item-none');
showTags.push($(nextNode[0]).attr('data-tag'));
showTags = JSON.stringify(showTags);
$('.select-ul').attr('data-item', showTags);
}
});