|
|
<!DOCTYPE html>
|
|
|
<html dir="ltr" lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<meta name="format-detection" content="telephone=no" />
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
|
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
|
|
|
<meta http-equiv="expires" content="0">
|
|
|
<meta name="description" content="“我是党史记录人——红色少年行”">
|
|
|
<meta name="keywords" content="“我是党史记录人——红色少年行”">
|
|
|
<title>“我是党史记录人——红色少年行”</title>
|
|
|
<script src="skin/default/js/jquery-3.6.3.min.js" type="text/javascript"></script>
|
|
|
<link href="skin/default/css/animate.min.css" type="text/css" rel="stylesheet">
|
|
|
<link href="skin/default/css/css.css?v=1.1" rel="stylesheet" type="text/css">
|
|
|
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
|
|
|
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="/skin/default/js/html5shiv.min.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="mainbox">
|
|
|
<div class="header">
|
|
|
<img src="skin/default/images/headwords.png">
|
|
|
</div>
|
|
|
<!-- VR看展 -->
|
|
|
<div class="common-title"><img src="skin/default/images/title_vr.png"></div>
|
|
|
<div class="vrbox">
|
|
|
<div class="swiper-container" id="swiper-vr">
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 学习资料 -->
|
|
|
<div class="common-title"><img src="skin/default/images/title_study.png"></div>
|
|
|
<div class="studybox">
|
|
|
<div class="wrapper">
|
|
|
<div class="clearfix study-swiperbox">
|
|
|
<div class="study-party">
|
|
|
<!-- <div class="swiper-btn">-->
|
|
|
<!-- <li class="videonum">2</li>-->
|
|
|
<!-- <li class="picnum">6</li>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- 视频轮播图 -->
|
|
|
<div class="swiper-list" data-num="0">
|
|
|
<div class="swiper-container" id="swiper0">
|
|
|
<div class="swiper-wrapper">
|
|
|
</div>
|
|
|
<div class="swiper-pagination"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-list" data-num="1">
|
|
|
<!-- 图片轮播 -->
|
|
|
<div class="swiper-container" id="swiper1">
|
|
|
<div class="swiper-wrapper">
|
|
|
|
|
|
</div>
|
|
|
<div class="swiper-pagination"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右边固定栏 -->
|
|
|
<!-- <div class="study-right">-->
|
|
|
<!-- <img src="skin/default/images/rightimg.jpg">-->
|
|
|
<!-- </div>-->
|
|
|
</div>
|
|
|
<div class="studyContent">
|
|
|
<!-- 详情 -->
|
|
|
<div class="tit-top"><img src="skin/default/images/title_museum.png"><span class="tit-top-text"></span></div>
|
|
|
<div class="contentbox">
|
|
|
<div class="newstext">
|
|
|
</div>
|
|
|
<div class="lookMore">查看更多</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 开始答题 -->
|
|
|
<div class="answer-start" onclick="parent.window.toAnswer()">
|
|
|
<p>你已经对苏州革命博物馆的有一些了解了，快来答题吧！</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 弹出视频框 -->
|
|
|
<div class="showVideo">
|
|
|
<div class="showVideoContainer">
|
|
|
<div class="closebtn"></div>
|
|
|
<div class="videobox">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script language="javascript">
|
|
|
var w = $(window).width();
|
|
|
var rem_scale = w/375*62.5;
|
|
|
document.write("<style>html {font-size: "+rem_scale+"%;}</style>");
|
|
|
</script>
|
|
|
<link href="skin/default/css/swiper.min.css" rel="stylesheet" type="text/css">
|
|
|
<script src="skin/default/js/swiper.min.js" type="text/javascript"></script>
|
|
|
<script>
|
|
|
var piclis,videolis
|
|
|
|
|
|
// s1k2Autoplay();
|
|
|
|
|
|
function s1k2Autoplay() {
|
|
|
var timer = null;
|
|
|
var length = $(".swiper-btn li").length;
|
|
|
window.onload = init;
|
|
|
window.onresize = init;
|
|
|
window.onscroll = function() {
|
|
|
judgePlay();
|
|
|
}
|
|
|
|
|
|
$('.swiper-btn li').click(function() {
|
|
|
if (timer) {
|
|
|
clearInterval(timer);
|
|
|
timer = null;
|
|
|
judgePlay();
|
|
|
}
|
|
|
})
|
|
|
function judgePlay() {
|
|
|
if (!timer) {
|
|
|
timer = setInterval(function() {
|
|
|
index = ($(".swiper-btn li.on").index() + 1) % length;
|
|
|
console.log(index);
|
|
|
$('.swiper-btn li').eq(index).stop().addClass('on');
|
|
|
$('.swiper-btn li').eq(index).siblings('li').stop().removeClass('on');
|
|
|
$('.swiper-list[data-num=' + index + ']').stop().fadeIn().siblings(".swiper-list").stop().hide();
|
|
|
if(index == 0){
|
|
|
swiper1 = createSwiper(0);
|
|
|
}else if(index == 1){
|
|
|
swiper2 = createSwiper(1);
|
|
|
}
|
|
|
}, 2000)
|
|
|
|
|
|
} else {
|
|
|
if (timer) {
|
|
|
clearInterval(timer);
|
|
|
timer = null;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
judgePlay();
|
|
|
}
|
|
|
}
|
|
|
function createSwiper(index){
|
|
|
var swiper = new Swiper ("#swiper"+index, {
|
|
|
autoplay:3500,
|
|
|
speed:1000,
|
|
|
autoplayDisableOnInteraction : false,
|
|
|
pagination: '#swiper'+index+' .swiper-pagination',
|
|
|
paginationClickable: true,
|
|
|
effect:'fade',
|
|
|
observer:true,
|
|
|
observeParents:true,
|
|
|
onDestroy: function(swiper){
|
|
|
|
|
|
}
|
|
|
});
|
|
|
return swiper;
|
|
|
}
|
|
|
|
|
|
var html=" ";
|
|
|
function showVideo(obj){
|
|
|
var videourl = $(obj).attr("videourl");
|
|
|
html = "<video src='"+videourl+"' autoplay muted preload='auto' controls></video>";
|
|
|
$(".videobox").html(html);
|
|
|
}
|
|
|
|
|
|
$('.closebtn').click(function(){
|
|
|
$('.showVideo').removeClass('act');
|
|
|
$(".videobox video").remove();
|
|
|
});
|
|
|
|
|
|
|
|
|
function setDomData (obj) {
|
|
|
let { detail, vrs, images } = obj;
|
|
|
if (vrs.length > 0) {
|
|
|
|
|
|
$('.common-title').show();
|
|
|
$('#swiper-vr .swiper-wrapper').show();
|
|
|
let dom = '';
|
|
|
vrs.forEach(item => {
|
|
|
dom +=`<div class="swiper-slide"><a href="${item.url}"><div class="imgbox"><img src="${item.image?.url}"></div><div class="swiper-vrtitle"><span>${item?.name}</span></div><div class="vr-marker">${item.has_read > 0 ? '已看展' : '未看展'}</div><div class="shadow"></div></a></div>`
|
|
|
})
|
|
|
$('#swiper-vr .swiper-wrapper').append($(dom));
|
|
|
var swiper = new Swiper('#swiper-vr', {
|
|
|
loop:true,
|
|
|
autoplay: 3500,
|
|
|
autoplayDisableOnInteraction : false,
|
|
|
pagination: '#swiper-vr .swiper-pagination',
|
|
|
slidesPerView: 'auto',
|
|
|
paginationClickable: true,
|
|
|
spaceBetween: 12
|
|
|
});
|
|
|
} else {
|
|
|
$('.common-title').css('display', 'none');
|
|
|
$('#swiper-vr .swiper-wrapper').css('display', 'none');
|
|
|
}
|
|
|
if (images.length > 0) {
|
|
|
let dom = '';
|
|
|
images.forEach(item => {
|
|
|
dom += `<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="${item.image?.url}">
|
|
|
</div>
|
|
|
</a></div>`
|
|
|
})
|
|
|
$('#swiper1 .swiper-wrapper').append($(dom));
|
|
|
|
|
|
if(piclis==""){
|
|
|
$(".swiper-btn li.picnum").hide();
|
|
|
}
|
|
|
swiper1 = createSwiper(1);
|
|
|
}
|
|
|
$('#swiper0 .swiper-wrapper').append($(`<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="${detail.video_image ? detail.video_image?.url : images[0]?.image?.url}">
|
|
|
</div>
|
|
|
<div class="playbtn" videourl = "${detail.video?.url}"></div>
|
|
|
</a></div>`))
|
|
|
|
|
|
videolis = $("#swiper0 .swiper-slide").length;
|
|
|
piclis = $("#swiper1 .swiper-slide").length;
|
|
|
$(".swiper-btn li.videonum").html(videolis);
|
|
|
$(".swiper-btn li.picnum").html(piclis);
|
|
|
if(videolis==""){
|
|
|
$(".swiper-btn li.videonum").hide();
|
|
|
}
|
|
|
$(".lookMore").click(function(){
|
|
|
$(".newstext").css("height","auto");
|
|
|
$(this).hide();
|
|
|
})
|
|
|
|
|
|
$(".playbtn").click(function(){
|
|
|
$(".videobox").empty(' ');
|
|
|
showVideo(this);
|
|
|
$(".showVideo").addClass("act");
|
|
|
})
|
|
|
|
|
|
if(videolis >= 1 && piclis >= 1){
|
|
|
$(".swiper-list:first").show().siblings(".swiper-list").hide();
|
|
|
}
|
|
|
|
|
|
$('.swiper-btn li:first').addClass("on").siblings().removeClass('on');
|
|
|
|
|
|
$('.swiper-btn li').each(function() {
|
|
|
var index = $(this).index();
|
|
|
$(this).attr('data-num',index);
|
|
|
});
|
|
|
|
|
|
$('.swiper-btn li').click(function() {
|
|
|
var shu = $(this).stop().attr('data-num');
|
|
|
$(this).stop().addClass('on');
|
|
|
$(this).siblings('li').stop().removeClass('on');
|
|
|
$('.swiper-list[data-num=' + shu + ']').stop().fadeIn().siblings(".swiper-list").stop().hide();
|
|
|
if(shu == 0){
|
|
|
swiper1 = createSwiper(0);
|
|
|
}else if(shu == 1){
|
|
|
swiper2 = createSwiper(1);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
$('.contentbox .newstext').append($(detail?.content))
|
|
|
$('.tit-top .tit-top-text').text(detail?.name)
|
|
|
window.parent.hideLoading()
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
