308 lines
7.0 KiB
HTML
308 lines
7.0 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>智慧豆豆</title>
|
||
<script src="yaocai/js/jquery-2.1.1.js"></script>
|
||
<style type="text/css">
|
||
*{
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
body {
|
||
|
||
font-family:"Helvetica Neue", sans-serif;
|
||
margin:4%;
|
||
}
|
||
h1{
|
||
font-size:30px;
|
||
|
||
text-align:center;
|
||
margin:50px auto;
|
||
}
|
||
#content{
|
||
|
||
}
|
||
#content article{
|
||
background:#E6E6FA;
|
||
width:20%;
|
||
float:left;
|
||
box-sizing:border-box;
|
||
padding:2%;
|
||
text-align:center;
|
||
margin-bottom:25px;
|
||
}
|
||
#content article h1{
|
||
font-size:36px;
|
||
color:rgba(255,255,255,.9);
|
||
margin:20px auto;
|
||
}
|
||
#content article p{
|
||
color:rgba(255,255,255,.7);
|
||
}
|
||
#content article img{
|
||
width:50%;
|
||
}
|
||
@media screen and (min-width: 768px) and (max-width: 979px) {
|
||
#content article{
|
||
width:50%;
|
||
position:relative;
|
||
text-align:left;
|
||
}
|
||
#content article img{
|
||
width:20%;
|
||
position:absolute;
|
||
}
|
||
#content article h1{
|
||
margin:0 0 20px 30%;
|
||
text-align:left;
|
||
}
|
||
#content article p{
|
||
margin-left:30%;
|
||
}
|
||
#content article:nth-child(odd){
|
||
clear:both;
|
||
}
|
||
}
|
||
@media screen and (max-width: 767px) {
|
||
#content article{
|
||
width:50%;
|
||
}
|
||
#content article img{
|
||
width:40%;
|
||
}
|
||
#content article:nth-child(odd){
|
||
clear:both;
|
||
}
|
||
}
|
||
@media screen and (max-width: 480px) {
|
||
#content article{
|
||
width:100%;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
#cotenttwo{
|
||
|
||
padding:10px 8%;
|
||
}
|
||
|
||
|
||
@media screen and (max-width: 1200px) {
|
||
#cotenttwo{
|
||
padding:10px 8%;
|
||
}
|
||
img{
|
||
width:calc(100% - 350px);
|
||
}
|
||
}
|
||
@media screen and (max-width: 979px) {
|
||
#cotenttwo{
|
||
padding:10px 5%;
|
||
}
|
||
img{
|
||
width:50%;
|
||
}
|
||
}
|
||
@media screen and (max-width: 767px) {
|
||
#cotenttwo{
|
||
padding:10px 20px;
|
||
}
|
||
img{
|
||
width:100%;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
#slideshow{
|
||
background:#E6E6FA;
|
||
width:980px;
|
||
height:450px;
|
||
overflow:hidden;
|
||
margin:0 auto;
|
||
position:relative;
|
||
}
|
||
#slideshow ul, #slideshow ul li, #slideshow-nav{
|
||
list-style:none;
|
||
position:absolute;
|
||
}
|
||
#slideshow-nav{
|
||
width:100%;
|
||
bottom:20px;
|
||
text-align:center;
|
||
}
|
||
#slideshow-nav span{
|
||
display:inline-block;
|
||
border-radius:50%;
|
||
width:15px;
|
||
height:15px;
|
||
font-size:0;
|
||
background:rgba(255,255,255,.3);
|
||
transition:all .5s;
|
||
-webkit-transition:all .5s;
|
||
margin:0 7px;
|
||
cursor:pointer;
|
||
user-select:none; /*使圆点不能被选中*/
|
||
-webkit-user-select:none;
|
||
}
|
||
#slideshow-nav span.active{
|
||
background:#FFF;
|
||
}
|
||
@media screen and (max-width: 979px) {
|
||
#slideshow, ul, li, img{
|
||
width:100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<h2>智慧豆豆app</h2>
|
||
<div id="slideshow">
|
||
<ul>
|
||
<li><img src="p1.jpg"></li>
|
||
<li><img src="p2.jpg"></li>
|
||
<li><img src="p3.jpg"></li>
|
||
<li><img src="p4.jpg"></li>
|
||
</ul>
|
||
<div id="slideshow-nav"></div>
|
||
</div>
|
||
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
var duration = 3000; //每张图片的持续显示时间
|
||
var speed = 1000; //图片切换的动画时间
|
||
var width = $('#slideshow').width(); //获得单张图片的宽度
|
||
var curIndex = 0; //设置当前显示图片的索引值
|
||
var totalIndex = $('#slideshow > ul > li').length; //获得总的图片数量
|
||
var timer; //设置一个计时变量
|
||
$('#slideshow > ul > li').each(function(index) {
|
||
$(this).css("left", index*width+"px"); //设置轮播图片的横向排列
|
||
$('#slideshow-nav').append("<span>"+(index+1)+"</span>"); //在导航中添加相应的节点
|
||
});
|
||
$('#slideshow-nav > span').each(function(index) {
|
||
$(this).attr("index", index); //存储每个节点的索引值
|
||
$(this).click(function(){ //当span元素被点击时
|
||
curIndex = $(this).attr("index")-1; //刷新当前显示图片的索引值
|
||
clearTimeout(timer); //清除计时
|
||
move(); //重新执行move函数以显示该图片
|
||
});
|
||
});
|
||
$('#slideshow-nav > span').eq(0).addClass("active"); //设置第一个圆点为active
|
||
var firstChild = $('#slideshow > ul > li').eq(0).clone(); //将第一张图片复制一份
|
||
$('#slideshow > ul').append(firstChild); //将该图片添加到列表最末
|
||
firstChild.css("left", totalIndex*width+"px"); //将复制的第一张图片显示在图片序列最右侧
|
||
function move(){
|
||
curIndex++; //使索引值加以1
|
||
if(curIndex>totalIndex){ //当索引值大于图片总数时
|
||
curIndex = 1; //表示当前应播放第2张图片
|
||
$('#slideshow > ul').css("left", "0px"); //将图片序列重置到原点
|
||
}
|
||
for(var i=0; i < totalIndex; i++){
|
||
$('#slideshow-nav > span').eq(i).removeClass("active"); //清除所有导航节点的active类
|
||
}
|
||
if(curIndex === totalIndex){
|
||
$('#slideshow-nav > span').eq(0).addClass("active"); //如果当前索引值等于图片总数，则说明当前正显示第一张图片的副本，因此应激活第一个导航节点
|
||
}else{
|
||
$('#slideshow-nav > span').eq(curIndex).addClass("active"); //在其余情况下，则为当前导航节点添加active类
|
||
}
|
||
$('#slideshow > ul').animate({left:width*curIndex*-1+"px"},speed); //为图片序列创建动画
|
||
timer = setTimeout(move,duration+speed); //设置延迟一定时间后执行move函数，延迟时间等于动画时长加上每张图片的持续显示时间
|
||
}
|
||
timer = setTimeout(move,duration); //设置延迟一定时间后执行move函数，延迟时间等于每张图片的持续显示时间
|
||
$('#slideshow').css("height", $('img').height()+"px");
|
||
$(window).resize(function() {
|
||
width = $('#slideshow').width();
|
||
$('#slideshow').css("height", $('img').height()+"px");
|
||
$('#slideshow > ul > li').each(function(index) {
|
||
$(this).css("left", index*width+"px"); //设置轮播图片的横向排列
|
||
});
|
||
$('#slideshow > ul').stop().animate({left:width*curIndex*-1+"px"},0);
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<section id="cotenttwo">
|
||
<article>
|
||
<h1>功能模块简介</h1>
|
||
</article>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
<section id="content">
|
||
<article>
|
||
<img src="pic_two.jpg" alt="首页">
|
||
<h1>首页</h1>
|
||
<p>平台精彩推荐</p>
|
||
</article>
|
||
<article>
|
||
<img src="pic_three.jpg" alt="发现">
|
||
<h1>发现</h1>
|
||
<p>线上可以实时互动的</p>
|
||
</article>
|
||
<article>
|
||
<img src="pic_five.jpg" alt="购物车">
|
||
<h1>购物车</h1>
|
||
<p>便民购物</p>
|
||
</article>
|
||
<article>
|
||
<img src="pic_four.jpg" alt="物业">
|
||
<h1>物业</h1>
|
||
<p>生活缴费</p>
|
||
</article>
|
||
<article>
|
||
<img src="pic_one.jpg" alt="我的">
|
||
<h1>我的</h1>
|
||
<p>订单查询</p>
|
||
</article>
|
||
</section>
|
||
|
||
|
||
<section id="cotenttwo">
|
||
<article>
|
||
<h1>应用介绍</h1>
|
||
|
||
<h1>豆豆智慧社区app是一款量身定制的小区管理软件，可以方便物业进行移动化的管理，实时给大家的生活保驾护航，有任何的需求，都可以直接线上进行反应，提供的服务非常的完善，线上也是可以实时互动的，让大家享受更是便利的社区生活
|
||
，可以提供物业管理，商城，智能门禁和电梯等系列服务。
|
||
</h1>
|
||
</article>
|
||
</section>
|
||
|
||
|
||
<section id="cotenttwo">
|
||
<article>
|
||
<h1>下载地址(android)</h1>
|
||
|
||
|
||
<div style="text-align: center;">
|
||
<p>https://www.pgyer.com/zcsd</p>
|
||
<p></p>
|
||
<p></p>
|
||
<img style="text-align: center;" src="zcsd.png">
|
||
</div>
|
||
</article>
|
||
|
||
|
||
</section>
|
||
|
||
</body>
|
||
|
||
<script src="yaocai/js/index.js"></script>
|
||
</html>
|