<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>心理健康评估</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="mind">
<div class="swiper-container">
<div class="mindtop"> <span class="swiper-button-prev swiper-button-blue"></span>
<h4>生活常识选择题及答案</h4>
<span class="swiper-button-next swiper-button-blue"></span> </div>
<div class="swiper-wrapper">
<dl class="swiper-slide">
<dt>1、“大煮干丝”是哪个菜系的代表菜之一( )</dt>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
</dl>
<dl class="swiper-slide">
<dt>2. 吃冰淇淋不解渴主要是因为它:</dt>
<dd>A、含蛋白质</dd>
<dd>B、含脂肪</dd>
<dd>C、含糖</dd>
</dl>
<dl class="swiper-slide">
<dt>3. 工笔是哪种绘画形式的技法</dt>
<dd>A、水彩画</dd>
<dd>B、油画</dd>
<dd>C、水粉画</dd>
<dd>D、国画</dd>
</dl>
<dl class="swiper-slide">
<dt>4、“大煮干丝”是哪个菜系的代表菜之一( )</dt>
<dd>A、四川菜系</dd>
<dd>B、山东菜系</dd>
<dd>C、广东菜系</dd>
<dd>D、淮扬菜系</dd>
</dl>
<dl class="swiper-slide">
<dt>5. 吃冰淇淋不解渴主要是因为它:</dt>
<dd>A、含蛋白质</dd>
<dd>B、含脂肪</dd>
<dd>C、含糖</dd>
</dl>
</div>
<div class="swiper-pagination"></div>
<div class="mindfot">
<div class="fl-left" id="numok"><img src="images/mindok.png"><span>交卷</span></div>
<div class="fl-right" id="showall"><img src="images/mindnum.png"><span id="curnum">1</span>/<span id="totnum"></span></div>
<div class="clearfix"></div>
</div>
<div class="maskwhite"></div>
<div class="subjuan">
<p>提示</p>
<p>您已经回答了<span id="subnum"></span>题,确定要交卷么?</p>
<div class="subyn">
<div class="fl-left" id="subno">取消</div>
<div class="fl-right" id="subyes">交卷</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<script type="text/javascript">
//题目轮播
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
paginationClickable: true,
paginationBulletRender: function (index, className) {
$("#totnum").text(index+1);//总页码
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
onSlideChangeEnd: function(swiper){
$("#curnum").text(swiper.activeIndex+1);//当前页
}
});
//点击底部出现题目数
$("#showall").click(function(){
$(".maskwhite").toggle();
$(".swiper-pagination").toggle();
});
//选择答案
$("dl.swiper-slide dd").click(function(){
$(this).parent("dl").find("dd").removeClass("chance");
$(this).addClass("chance");
var indexnum = $(this).parent("dl").index();
$(".swiper-pagination span").eq(indexnum).addClass("curr");
});
//交卷
$("#numok").click(function(){
$(".swiper-pagination").hide();
var allnum = $("#totnum").text();
$("#subnum").text(allnum);
var lengths = $(".swiper-pagination span.curr").length;
if(lengths==allnum){
$(".maskwhite").show();
$(".subjuan").show();
$("#subno").click(function(){//取消
$(".maskwhite").hide();
$(".subjuan").hide();
});
$("#subyes").click(function(){//取消
$(".maskwhite").hide();
$(".subjuan").hide();
window.location.href="#"
});
}
else{
$(".maskwhite").hide();
}
});
</script>
</html>
手机端html5滑动选择题插件
需积分: 28 173 浏览量
2017-10-08
10:22:24
上传
评论
收藏 58KB RAR 举报
天天的天天1992
- 粉丝: 0
- 资源: 5
最新资源
- 基于ThinkPHP的轻量级PHP开发框架设计源码
- 基于CSS的响应式鲜花网站全屏效果设计源码
- 基于JavaScript的访客预约系统设计源码
- 基于Vue和ECharts的工作租房数据可视化系统设计源码
- 1040g0cg310ravpiu6ibg5pg00tsipsln3ju2d0g 2
- 基于Python的SAR图像去噪CNN-NLM设计源码
- redhat6升级到redhat7,过程redhat6.x-> redhat6.10->rehat7.9 主版本最高版本
- 基于Django的流程引擎设计源码
- 基于Node.js的Express框架与MySQL的后台管理系统设计源码
- 基于Java的Flink流批一体数据处理快速集成开发框架设计源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈