|
|
<!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 class="swiper-slide"><a href="#">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/img1.jpg">
|
|
|
</div>
|
|
|
<div class="swiper-vrtitle"><span>习近平新时代中国特色社会主义思想指引下的苏州实践</span></div>
|
|
|
<div class="vr-marker">已看展</div>
|
|
|
<div class="shadow"></div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="#">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/img1.jpg">
|
|
|
</div>
|
|
|
<div class="swiper-vrtitle"><span>光辉的历程·苏州篇章</span></div>
|
|
|
<div class="vr-marker">未看展</div>
|
|
|
<div class="shadow"></div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="#">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/img1.jpg">
|
|
|
</div>
|
|
|
<div class="swiper-vrtitle"><span>光辉的历程·苏州篇章</span></div>
|
|
|
<div class="vr-marker">未看展</div>
|
|
|
<div class="shadow"></div>
|
|
|
</a></div>
|
|
|
</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 class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
<div class="playbtn" videourl = "skin/default/images/video-test1.mp4"></div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
<div class="playbtn" videourl = "skin/default/images/video-test2.mp4"></div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
<div class="playbtn" videourl = "skin/default/images/video-test1.mp4"></div>
|
|
|
</a></div>
|
|
|
</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 class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
</a></div>
|
|
|
<div class="swiper-slide"><a href="javascript:;">
|
|
|
<div class="imgbox">
|
|
|
<img src="skin/default/images/swiperimg.jpg">
|
|
|
</div>
|
|
|
</a></div>
|
|
|
</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"></div>
|
|
|
<div class="contentbox">
|
|
|
<div class="newstext">
|
|
|
<p>苏州革命博物馆建成于1993年，占地10000多平方米，展区分两层，面积4000平方米，共有两项基本陈列和两个临时展厅。整体建筑具有鲜明的革命纪念主题特色和浓厚的历史文化气息。</p>
|
|
|
<p>基本陈列“光辉的历程一中国共产党在苏州”，借助历史照片、文字和革命文物等，系统讲述了在中国共产党在苏州的百年光辉历程。大型多媒体半景画演示项目《阳澄烽火》，借助声、光、电等多种演示手段与1000平方米的巨型油画、500平方米的场景模型完美结合，细致还原了发生在抗日战争时期阳澄湖地区的“洋沟港战斗”目前，苏州革命博物馆荣获省爱国主义教育基地、省党史教育基地、省社会科学普及示范基地、省国防教育基地、省青少年科技教育示范基地及省级党员教育实境课堂示范点等称号</p>
|
|
|
</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 swiper = new Swiper('#swiper-vr', {
|
|
|
loop:true,
|
|
|
autoplay: 3500,
|
|
|
autoplayDisableOnInteraction : false,
|
|
|
pagination: '#swiper-vr .swiper-pagination',
|
|
|
slidesPerView: 'auto',
|
|
|
paginationClickable: true,
|
|
|
spaceBetween: 12
|
|
|
});
|
|
|
var videolis = $("#swiper0 .swiper-slide").length;
|
|
|
var piclis = $("#swiper1 .swiper-slide").length;
|
|
|
$(".swiper-btn li.videonum").html(videolis);
|
|
|
$(".swiper-btn li.picnum").html(piclis);
|
|
|
|
|
|
if(videolis >= 1 && piclis >= 1){
|
|
|
$(".swiper-list:first").show().siblings(".swiper-list").hide();
|
|
|
}
|
|
|
if(videolis==""){
|
|
|
$(".swiper-btn li.videonum").hide();
|
|
|
}
|
|
|
if(piclis==""){
|
|
|
$(".swiper-btn li.picnum").hide();
|
|
|
}
|
|
|
$('.swiper-btn li:first').addClass("on").siblings().removeClass('on');
|
|
|
var swiper1,swiper2;
|
|
|
swiper1 = createSwiper(0);
|
|
|
|
|
|
$('.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);
|
|
|
}
|
|
|
});
|
|
|
// 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;
|
|
|
}
|
|
|
|
|
|
$(".lookMore").click(function(){
|
|
|
$(".newstext").css("height","auto");
|
|
|
$(this).hide();
|
|
|
})
|
|
|
|
|
|
$(".playbtn").click(function(){
|
|
|
$(".videobox").empty(' ');
|
|
|
showVideo(this);
|
|
|
$(".showVideo").addClass("act");
|
|
|
})
|
|
|
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();
|
|
|
});
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
