<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=1300, initial-scale=0.1 ">

  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/head.css">
  <link rel="stylesheet" href="./css/cbl.css">
  <link rel="stylesheet" href="./css/aos.css">
  <link rel="shortcut icon" href="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/logo.png" type="image/png">
  <!-- <link rel="shortcut icon" href="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/logo.ico" type=image/x-icon> -->
  <title>青岛有你我信息科技有限公司</title>
  <style>
    .focus {
      position: relative;
      width: 1300px;
      height: 440px;
      background-color: white;
      overflow: hidden;
    }

    .focus ul {
      position: absolute;
      top: 60px;
      left: 0;
      width: 600%;
    }

    .focus ul li {
      float: left;
    }

    .arrow-l,
    .arrow-r {
      display: none;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 24px;
      height: 40px;
      background: rgba(0, 0, 0, .3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-family: 'icomoon';
      font-size: 18px;
      z-index: 2;
    }

    .arrow-r {
      right: 0;
    }

    .circle {
      position: absolute;
      bottom: 10px;
      margin-left: 597px;
    }

    .circle li {
      float: left;
      width: 8px;
      height: 8px;
      /* background-color: #c2c2c2; */
      border: 1px solid #c2c2c2;
      margin: 0 6px;
      border-radius: 50%;
      /*鼠标经过显示小手*/
      /* cursor: pointer; */
    }

    .current {
      background-color: #c2c2c2;
    }
  </style>
</head>
<!-- navigator媒体查询导致页面缩放 -->

<body>
  <div class="app" style="width: 1300px;margin: auto;">
    <div class="header">
      <div class="container clearfix">
        <div class="header-left">
          <a href="javascript:;"><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/logo.png" alt=""></a>
        </div>
        <div class="header-left header-left-title">青岛有你我信息科技有限公司</div>
        <div class="header-right">  
          <ul id="header-ul">
            <a href="../index.html" class="active-head cpfw2" target="_self">首页</a>
            <a href="../companyIntroduction.html" class="cpfw">公司介绍</a>
            <a href="../jszc.html" class="cpfw1" target="_self">技术支持</a>
            <a href="../fwqy.html" target="_self">服务企业</a>
            <a href="../lxwm.html" target="_self">联系我们</a>
          </ul>
          <!-- <div class="mosmter">
            <ul>
              <li><a href="./sqzl.html" target="_self">税务共享中心</a> </li>
              <li><a href="./zhbb.html" target="_self">税（费）种智慧报表</a> </li>
              <li><a href="./xsy.html" target="_self">晓税云</a> </li>
              <li><a href="./xscw.html" target="_self">晓税财务</a> </li>
            </ul> 
          </div> -->
        </div>
      </div>
    </div>
    <div class="toper" id="head"></div>
    <!-- banner图 -->
    <!-- <div class="banner">

        </div> -->
    <!-- <a href="../routerIndex.html" target="_self">
            <div class="banner-container banner">
                <div class="banner-img-container">
                    <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner.png" alt="">
                    <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner2.png"  alt="">
                    <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner.png"  alt="">
                </div>
            </div>
        </a> -->
    <div class="focus fl">
      <a href="javascript:;" class="arrow-l">←</a>
      <a href="javascript:;" class="arrow-r">→</a>
      <ul>
        <li>
          <img width="1300px" src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner1.png" alt="">
        </li>
        <li>
          <img width="1300px" src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner2.png" alt="">
        </li>
        <li>
          <img width="1300px" src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner3.png" alt="">
        </li>
        <!-- <li>
          <a href="../routerIndex.html" target="_self"><img width="1300px" src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner2.png" alt=""></a>
        </li>
        <li>
          <img width="1300px" src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner.png" alt="">
        </li>
        <li>
          <a href="../routerIndex.html" target="_self"><img width="1300px" src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/banner2.png" alt=""></a>
        </li> -->
      </ul>
      <ol class="circle"></ol>
    </div>
    <!-- 公司介绍 -->
    <div class="sqzl" id="sqzl">
      <div class="container">
        <div id="tittle">公司介绍
          <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
        </div>
        <div class="sqzl-context" style="margin-top: 0px;">
          <div class="sqzl-left" aos="fade-right" style="margin-top: 80px;">
            <!-- <p class="newTextStyle" style="line-height: 20px;">
              基于税务电子签名授权、安全的税企直连通道，通过智慧税务赋能企业，为企业数字化转型发展提供建设、服务方案。</p>
            <p class="newTextStyle" style="line-height: 20px;">
              <b>税企直连通道：</b>为构建大企业集团税务服务和管理新格局，税务局专门为大企业集团建设的用于税企间数据交换的直连通道，符合条件的大企业集团申请报备后，免费使用。
            </p> -->
            <p class="newTextStyle" style="line-height: 20px;">
              青岛有你我信息科技有限公司成立于2016年4月，资质荣誉包括质量管理体系认证、职业健康安全管理体系认证，并通过国家高新技术企业认定、计算机信息系统集成资质认证等。</p>
            <p class="newTextStyle" style="line-height: 20px;">自成立以来专注于软件开发服务，目前分三大应用领域：
              培训考试管理应用、安全风险管控应用、企业管理信息应用，并在各应用领域拥有自主知识产权的软件著作权及商标著作权几十项。</p>
            <p class="newTextStyle" style="line-height: 20px;">
              奉行人才是有你我的核心财富的用人理念，坚持员工立业、回报股东、回馈社会共赢的财富观；感恩新人，成就客户；感恩付出，成就员工；感恩投入，成就股东。</p>
          </div>

          <div class="sqzl-right" aos="fade-left">
            <!-- <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sqzl.png" alt=""> -->
          </div>
        </div>
      </div>
    </div>
    <!-- nav -->
    <!-- <div class="banner-nav clearfix">
      <div class="banner-nav-box">
        <a href="#sqzl">
          <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/1.png" alt="">
        </a>
        <div>税企直连服务</div>
      </div>
      <div class="banner-nav-box">
        <a href="#qyswgxzx">
          <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/2.png" alt="">
        </a>
        <div>税务共享中心</div>
      </div>
      <div class="banner-nav-box">
        <a href="#sfzzhbbfw">
          <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/3.png" alt="">
        </a>
        <div>税（费）种智慧报表</div>
      </div>
      <div class="banner-nav-box">
        <a href="#xsy">
          <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/4.png" alt="">
        </a>
        <div>晓税云</div>
      </div>
    </div> -->
    <!-- 技术支持 -->
    <div class="jszc" id="jszc">
      <div class="container">
        <div id="tittle">技术支持
          <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
        </div>
        <div class="jszc-content">
          <div class=" jszc-box">
            <a href="../jszc1.html">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/jszc-1.png" alt="">
            </a>
            <div>培训考试管理系统</div>
          </div>
          <div class=" jszc-box">
            <a href="../jszc2.html">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/jszc-2.png" alt="">
            </a>
            <div>安全风险管控系统</div>
          </div>
          <div class="jszc-box">
            <a href="../jszc3.html">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/jszc-3.png" alt="">
            </a>
            <div>企业管理系统</div>
          </div>
          <div class="jszc-box">
            <a href="../jszc4.html">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/jszc-4.png" alt="">
            </a>
            <div>RPA流程自动化</div>
          </div>
          <div class="jszc-box">
            <a href="../jszc5.html">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/jszc-5.png" alt="">
            </a>
            <div>其他系统案例</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业税务共享中心 -->
    <!-- <div class="qyswgxzx" id="qyswgxzx">
      <div class="container">
        <div id="tittle">税务共享中心
          <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
        </div>
        <div style="width: 62%;margin: auto;">
          <p class="newTextStyle">基于税务电子签名授权、安全的税企直连通道，在大企业集团布署的支持各类涉税业务办理的,可提供定制服务的电子税务局。</p>
        </div>
        <div class="qyswgxzx-content" data-aos="zoom-in">
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-5.png" alt="">
            <div>涉税信息池</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-6.png" alt="">
            <div>文书办理</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-7.png" alt="">
            <div>申报信息池</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-8.png" alt="">
            <div>风控信息池</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-9.png" alt="">
            <div>发票信息池</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-10.png" alt="">
            <div>政策信息池</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-11.png" alt="">
            <div>社保费服务</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-12.png" alt="">
            <div>平台经济</div>
          </div>
          <div class="qyswgxzx-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sw-13.png" alt="">
            <div>出口退税池</div>
          </div>
        </div>
        <div style="position: relative;">
          <a style="margin-top:80px;" href="./sqzl.html" target="_self"><span>了解更多</span></a>
        </div>

      </div>
    </div> -->
    <!-- 税（费）种智慧报表服务 -->
    <!-- <div class="sfzzhbbfw" id="sfzzhbbfw">
      <div class="container">
        <div id="tittle">税（费）种智慧报表
          <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
        </div>
        <div class="sqzl-context">
          <div class="sfzzhbbfw-right sqzl-right" aos="fade-right"> -->
    <!-- <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/sqzl.png" alt=""> -->
    <!-- </div>
          <div class="sfzzhbbfw-left sqzl-left" aos="fade-left" style="padding-left: 128px !important;">
            <p class="newTextStyle" style="padding-left: 100px;">
              是一款专业的税务行业报表产品，旨在提供跨省份全税种纳税申报表服务，适应多场景下的轻量化系统集成对接，可辅助企业涉税信息化建设专业规范、财税融合、服务前置、降本增效。</p>
            <a style="float: right;" class="clearfix" href="./zhbb.html" target="_self"><span style="margin-top: 30px
                            ;">了解更多</span></a>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 晓税云 -->
    <!-- <div class="xsy" id="xsy">
      <div class="container"> -->
    <!-- <div id="tittle" style="color:#fff">晓税云 -->
    <!-- <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div> -->
    <!-- <p style="color:#fff;font-size: 16px;padding: 0 171px;margin-top: 5px;">晓税是集发票管理、财务记账、纳税申报、风险评估等四大类业务的财税云平台，可以满足会计事务所、
                        税务事务所、企服公司、代理记账或拥有独立财务的企业使用。</p> -->
    <!-- </div> -->
    <!-- <div class="xsy-content" data-aos="flip-up"> -->
    <!-- <p class="newTextStyle">
            面向代账行业，可确保代账企业的客户安全，并提供用户界面、管理功能、大数据分析、税务风控模型等定制服务的可私有部署的一体化财税平台。
          </p> -->
    <!-- <div style="margin-top: 40px;  margin-left: 90px;">
            <a href="./xsy.html" target="_self">
              <span>了解更多</span>
            </a>
          </div> -->
    <!-- <div class="xsy-left" aos="fade-up">
                        <div class="xsy-left-top">
                            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/xsy-tit.png" alt="">
                            <p>晓税云</p>
                        </div>
                        <div class="xsy-left-con">
                            主要面向涉税专业服务机构使用的财税—体化平台，设有业务岗、会计岗、管理岗等角色，功能上涵盖了客户管理、发票管理、
                            财务管理、纳税申报、纳税评估等模块。
                        </div>
                        <div class="xsy-left-foot">
                            <a href="./xsy.html" target="_self">了解更多<span></span></a> 
                        </div>
                    </div> -->
    <!-- <div class="xsy-right" aos="fade-left">
                        <div class="xsy-left-top">
                            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/xscw-tit.png" alt="">
                            <p>晓税财务</p>
                        </div>
                        <div class="xsy-left-con">
                            主要面向有独立财务部门的企业，提供发票管理、财务管理、纳税评估等功能，用于给企业完成开票、
                            记账、报税、评估等流程的—体化平台
                        </div>
                        <div class="xsy-left-foot">
                           <a href="./xscw.html" target="_self">了解更多<span></span></a> 
                        </div>
                    </div> -->
    <!-- </div> -->
    <!-- <div class="xsy-bootom"> -->
    <!-- <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/jrgw-w.png" alt=""> -->
    <!-- <a href="http://xiaoshuiyun.com/" style="margin-right: 150%;" target="_blank"><span style="margin-top: 60px;"
              class="jrgw">进入晓税云</span></a> -->
    <!-- <a href="http://xiaoshuicaiwu.com/" target="_blank"><span class="jrgw">进入晓税财务</span></a> -->
    <!-- </div> -->
    <!-- </div>
    </div> -->
    <!-- 服务企业 -->
    <div class="ythz fwqy">
      <div class="container">
        <div id="tittle">服务企业
          <!-- <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div> -->
        </div>
        <div class="ythz-content" data-aos="zoom-in">
          <div class="ythz-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/fwqy1.png" alt="">
            <!-- <div>坚守初心</div> -->
            <p>
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/fwqy1_.png" alt="">
            </p>
            <!-- <p>中车青岛四方车辆研究所有限公司
              <br />中车青岛四方机车车辆有限公司
              <br /><span style="visibility: hidden;">占位</span>
              <br /><span style="visibility: hidden;">占位</span>
            </p> -->
          </div>
          <div class="ythz-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/fwqy2.png" alt="">
            <p>
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/fwqy2_.png" alt="">
            </p>
            <!-- <div>合作共赢</div> -->
            <!-- <p>中国石油集团长城钻探工程有限公司压裂公司
              <br />辽河石油勘探局有限公司储气库公司
              <br />中国石油集团长城钻探工程有限公司录井公司
              <br />新疆巴州塔里木能源有限责任公司
            </p> -->
          </div>
          <div class="ythz-box">
            <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/fwqy3.png" alt="">
            <p>
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/fwqy3_.png" alt="">
            </p>
            <!-- <div>生态链接</div> -->
            <!-- <p>国家税务总局青岛市税务局
              <br />国家税务总局大连市税务局
              <br />青岛市教育局
              <br />青岛教育版权协会
            </p> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 产品战略 -->
    <!-- <div class="cpzl">
            <div class="container">
                <div id="tittle" style="color: #fff;">产品战略
                    <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
                </div>
                <div class="cpzl-content" data-aos="flip-up">
                    围绕征管核心接口，基于省局区域税务征管现状、全国云化电子税务局趋势，
                    选择特色定制的税企直通及标准化的电子税务局开放接口作为税务行业规范的接口级互联技术路线，建设第三方市场化的涉税云服务平台，
                    提供税企应用数据互通智慧服务产品，是微智慧的战略。
                </div>
            </div>
        </div> -->
    <!-- 客户服务 -->
    <!-- <div class="khfw">
      <div class="container">
        <div id="tittle">客户服务
          <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
        </div>
        <div class="khfw-content" data-aos="zoom-in">
          <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/khfw-pp.png" alt="">
        </div>
      </div>
    </div> -->
    <!-- 团队建设 -->
    <!-- <div class="tdjs">
      <div class="container">
        <div id="tittle">团队建设
          <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div>
        </div>
        <div class="tdjs-content">
          <div class="tdjs-left" aos="fade-right">
            <div class="tdjs-nav">
              <span>团队</span>
              <p>独立思考、正直坚韧；专业分工、充分授权</p>
            </div>
            <div class="tdjs-nav">
              <span>合作</span>
              <p>真诚守信、坚守初心；换位思考、成就他人</p>
            </div>
            <div class="tdjs-nav">
              <span>发展</span>
              <p>精益创新、差异生存；积微成著、智慧互联</p>
            </div>
          </div>
          <div class="backgroung_img">
          </div>
        </div>
      </div>
    </div> -->
    <!-- 联系我们 -->
    <div class="ythz lxwm">
      <div class="container">
        <div id="tittle">联系我们
          <!-- <div><img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/d3.png" alt=""></div> -->
        </div>
        <div class="ythz-content" data-aos="zoom-in">
          <div class="ythz-box">
            <div class="lxwm-box">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/lxwm1.png" alt="">
            </div>
            <div>电话</div>
            <p>0532-82332123
              <br /><span style="visibility: hidden;">占位</span>
            </p>
          </div>
          <div class="ythz-box">
            <div class="lxwm-box">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/lxwm2.png" alt="">
            </div>
            <div>QQ</div>
            <p>36022712
              <br /><span style="visibility: hidden;">占位</span>
            </p>
          </div>
          <div class="ythz-box">
            <div class="lxwm-box">
              <img src="http://unial2016.oss-cn-hangzhou.aliyuncs.com/guanwang/assets/index/lxwm3.png" alt="">
            </div>
            <div>地址</div>
            <p>山东省青岛市市南区徐州路88号
              <br />海洋科技孵化器二层C205室
            </p>
          </div>
        </div>
      </div>
    </div>
    <div id="cbl"></div>
    <!-- <div id="footer"></div> -->
  </div>
</body>

</html>
<script src="js/jquery3.6.0.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/public.js"></script>
<script src="./js/index.js"></script>
<script>
  $(document).ready(function () {
    $("#header").load("./public/head.html");
    $("#footer").load("./public/foot.html");
    $("#cbl").load("./public/cbl.html");
  });
</script>
<script>
  function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      // 步长值写到定时器的里面
      // 把我们步长值改为整数 不要出现小数的问题
      // var step = Math.ceil((target - obj.offsetLeft) / 10);
      var step = (target - obj.offsetLeft) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      if (obj.offsetLeft == target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        // if (callback) {
        //     // 调用函数
        //     callback();
        // }
        callback && callback();
      }
      // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
      obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
  }
  window.addEventListener('load', function () {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 2. 鼠标经过focus 就显示隐藏左右按钮
    focus.addEventListener('mouseenter', function () {
      arrow_l.style.display = 'block';
      arrow_r.style.display = 'block';
      clearInterval(timer);
      timer = null; // 清除定时器变量
    });
    focus.addEventListener('mouseleave', function () {
      arrow_l.style.display = 'none';
      arrow_r.style.display = 'none';
      timer = setInterval(function () {
        //手动调用点击事件
        arrow_r.click();
      }, 2000);
    });
    // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
      // 创建一个小li 
      var li = document.createElement('li');
      // 记录当前小圆圈的索引号 通过自定义属性来做 
      li.setAttribute('index', i);
      // 把小li插入到ol 里面
      ol.appendChild(li);
      // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
      li.addEventListener('click', function () {
        // 干掉所有人 把所有的小li 清除 current 类名
        for (var i = 0; i < ol.children.length; i++) {
          ol.children[i].className = '';
        }
        // 留下我自己  当前的小li 设置current 类名
        this.className = 'current';
        // 5. 点击小圆圈，移动图片 当然移动的是 ul 
        // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
        // 当我们点击了某个小li 就拿到当前小li 的索引号
        var index = this.getAttribute('index');
        // 当我们点击了某个小li 就要把这个li 的索引号给 num  
        num = index;
        // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
        circle = index;
        // num = circle = index;
        console.log(focusWidth);
        console.log(index);

        animate(ul, -index * focusWidth);
      })
    }
    // 把ol里面的第一个小li设置类名为 current
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片(li)放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮， 图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // flag 节流阀
    var flag = true;
    arrow_r.addEventListener('click', function () {
      if (flag) {
        flag = false; // 关闭节流阀
        // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
        if (num == ul.children.length - 1) {
          ul.style.left = 0;
          num = 0;
        }
        num++;
        animate(ul, -num * focusWidth, function () {
          flag = true; // 打开节流阀
        });
        // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle++;
        // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
        if (circle == ol.children.length) {
          circle = 0;
        }
        // 调用函数
        circleChange();
      }
    });

    // 9. 左侧按钮做法
    arrow_l.addEventListener('click', function () {
      if (flag) {
        flag = false;
        if (num == 0) {
          num = ul.children.length - 1;
          ul.style.left = -num * focusWidth + 'px';

        }
        num--;
        animate(ul, -num * focusWidth, function () {
          flag = true;
        });
        // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
        circle--;
        // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
        // if (circle < 0) {
        //     circle = ol.children.length - 1;
        // }
        circle = circle < 0 ? ol.children.length - 1 : circle;
        // 调用函数
        circleChange();
      }
    });

    function circleChange() {
      // 先清除其余小圆圈的current类名
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      // 留下当前的小圆圈的current类名
      ol.children[circle].className = 'current';
    }
    // 10. 自动播放轮播图
    var timer = setInterval(function () {
      //手动调用点击事件
      arrow_r.click();
    }, 10000);

  })
</script>
