File: /www/wwwroot/www.sanjiangapp.com/template/sanjiang/xinlingshou.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{pboot:pagetitle}</title>
<meta name="keywords" content="{pboot:pagekeywords}">
<meta name="description" content="{pboot:pagedescription}">
<link rel="shortcut icon" href="{pboot:sitetplpath}/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/index.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/home.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/sulttion.css">
<link rel="stylesheet" href="{pboot:sitetplpath}/static/css/public.css">
<style>
#communityGroup{
background:#fff;
}
.ym_nav_nav_right .ym_nav_nav_right_button2{
color: #337AFB !important;
}
.help-right-item-sub,.help-right-item-title {
color: #8e98a9;
}
.banner{
display: flex;
justify-content: space-between;
}
.banner-pic{
width: 354px;
height: 302px;
}
.banner-pic img{
width: 100%;
}
.banner-word-btn{
margin-top: 42px;
display: inline-block;
border-radius: 5px;
color: #879fff;
font-size: 14px;
cursor: pointer;
}
.free_btn{
background:none;
border:1px solid #fff;
color:#fff;
margin-left:8px;
}
.head{
/*padding-top: 75px;*/
/*background-position-y: 68px !important;*/
background-size: 100% 100%;
}
.editionCenter{
width:1125px;
margin:0 auto;
}
.dis_flex{
display:flex;
justify-content: flex-start;
}
.groupDetail{
margin-top:30px;
display:flex;
justify-content: space-between;
}
.groupDetail>div{
text-align: center;
box-sizing: border-box;
padding:60px 38px 0;
}
.groupDetail .modeLeft{
text-align: left;
margin-top:77px;
width:380px;
height:400px;
background: linear-gradient(180deg,#f5fcff 0%, #f9f9f9 100%);
border-radius: 40px;
box-sizing: border-box;
padding:60px 38px 0;
}
.modeLeft dt{
color:#1E68EC;
font-size:24px;
font-weight: 700;
}
.modeLeft dd{
color:#242841;
font-size:16px;
font-weight: 700;
line-height: 68px;
border-bottom:1px dashed #BFBFBF;
}
.modeLeft dd:last-child{
border-bottom:none;
}
.modeRight dt{
color:#fff;
font-size:30px;
font-weight: 700;
}
.modeRight dd img{
display: inline-block;
margin-left:20px;
}
img{
vertical-align: middle;
}
.modeRight dd p{
color:#fff;
width:411px;
font-size:17px;
font-weight: 700;
line-height: 68px;
border-bottom:1px dashed #fff;
display: inline-block;
margin-left:42px;
}
.modeRight dd:last-child p{
border-bottom:none;
}
.groupDetail .modeRight{
text-align: left;
padding-top:60px;
width:630px;
height:477px;
background: linear-gradient(0deg,#1e68ec 0%, #28c3f9 100%);
/* border: 2px solid; */
/* border-image: linear-gradient(0deg, #1849bb 0%, #4bb8f1 100%) 2 2; */
border-radius: 40px;
box-sizing: border-box;
padding:60px 60px 20px;
}
.modeRight>div{
background-image: url('{pboot:sitetplpath}/static/images/sale_bg.png');
background-repeat: no-repeat;
background-position: center bottom;
height:100%;
}
.groupDetail .border{
padding:2px;
border-radius: 40px;
background: linear-gradient(0deg, #1849bb 0%, #4bb8f1 100%);
}
.modeText div{
line-height:63px;
height:63px;
color:#666666;
border-radius: 26px;
text-align: left;
text-indent: 24px;
font-size: 20px;
display: inline-block;
cursor: pointer;
}
.modeText div:hover{
color:#2556E2;
}
.modeText .active{
color:#2556E2;
box-shadow:0px 10px 13px rgba(35,87,225,0.05);
}
.sixCore{
height:888px;
width:1125px;
margin:0 auto;
box-sizing: border-box;
}
.sixCore_title{
height:156px;
position:relative;
margin-bottom:100px;
}
.sixCore_title h2{
font-size:35px;
line-height:75px;
width:100%;
text-align: center;
z-index:1;
position:absolute;
top:57px;
color: #242841;
}
.sixCore_title h3{
font-size: 37px;
line-height:37px;
color:#C4C6D4;
opacity: 0.5;
position:absolute;
width:100%;
text-align: center;
top:60px;
}
.sixCore_title .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:640px;
top:132px;
}
.sixCore_top,.sixCore_bottom{
display: flex;
justify-content: space-between;
margin-bottom: 74px;
}
.sixCore_bottom{
margin-top:67px;
}
.sixCore>button{
width: 160px;
height: 50px;
opacity: 1;
background: #fc692b;
border-radius: 4px;
font-size: 15px;
line-height: 50px;
color:#fff;
text-align: center;
border:none;
margin:0 auto;
display:block;
cursor: pointer;
}
.core{
width:303px;
height:91px;
display: flex;
justify-content: space-between;
}
.core .pic{
width:98px;
height:91px;
}
.core>div:last-child{
width:177px;
}
.core>div:last-child p{
font-size: 16px;
line-height: 34px;
color:#434A60;
text-align: left;
font-weight: 400;
}
.core>div:last-child p:first-child{
font-size: 18px;
line-height: 36px;
color:#242841;
text-align: left;
font-weight: 700;
margin-top:11px;
}
.pic img{
width:100%;
height:100%;
}
.upShadow .paragraph{
color:rgba(98,101,115,1);
}
.upShadow{
transform: translateY(-40px);
box-shadow: 0 0 49px 0 rgba(147,147,147,0.2);
}
.apply{
height:651px;
width:1125px;
background:#fff;
margin:0 auto;
}
.applyTitle{
height:156px;
position:relative;
}
.applyTitle h2{
font-size:35px;
line-height:75px;
width:100%;
text-align: center;
z-index:1;
position:absolute;
top:57px;
color: #242841;
}
.applyTitle h3{
font-size: 37px;
line-height:37px;
color:#C4C6D4;
opacity: 0.2;
position:absolute;
width:100%;
text-align: center;
top:60px;
}
.applyTitle .bar{
width:70px;
height:6px;
background:#FF6918;
border-radius: 3px 3px 0 0;
position:absolute;
right:526px;
top:132px;
}
.applyPic{
margin-top:50px;
display: flex;
justify-content: space-between;
}
.applyPic .graphic{
width:250px;
height: 304px;
background:#fff;
border-radius: 40px;
text-align: center;
border:1px solid #27BEF9;
}
/* .graphicUp{
transform: translateY(-24px);
} */
.graphic img{
width:86px;
height:80px;
margin-top:50px;
}
.graphic p{
margin:0 45px;
font-size:13px;
line-height:24px;
color:#434A60;
text-align: center;
}
.graphic .titlep{
font-size:19px;
line-height:56px;
color:#242841;
text-align: center;
margin:36px 0px 0;
font-weight: 700;
}
.groupTest{
height:267px;
width:100%;
margin-top:45px;
margin-bottom: -1px;/*隐藏图片下1像素白边*/
/* position:relative; */
background:url('{pboot:sitetplpath}/static/images/bottom.png');
background-size:100% 100%;
}
.groupTest>p{
font-size:30px;
color:#fff;
padding-top:56px;
text-align: center;
}
.groupTest>div{
margin-top:32px;
text-align: center;
}
.groupTest>div>p{
display:inline-block;
font-size:15px;
color:#fff;
}
.groupTest>div>p img{
display:inline-block;
margin-right:10px;
}
.groupTest>div>p:first-child{
margin-right:80px;
}
.groupTestBtn{
width:160px;
height:44px;
background:#fff;
color:#2556E2;
text-align: center;
line-height:44px;
font-size:14px;
border-radius: 5px;
/* box-shadow: 1 2px 6px #117FE7; */
box-shadow: 1px 2px 0px rgba(17,127,231,0.25) inset;
cursor: pointer;
margin:50px auto 0;
user-select:none;
}
.swiper{
height:478px;
/* width:100%; */
position:relative;
}
.swiper_item{
width:100%;
height:100%;
position: absolute;
justify-content: space-around;
}
.swiper_item .left{
min-width:400px;
box-sizing: border-box;
padding-left: 20px;
margin-right:20px;
}
.swiper_item h4{
color: #242841;
font-weight: 700;
font-size: 24px;
line-height:58px;
}
.swiper_item p {
color:#677086;
font-size: 18px;
line-height:44px;
}
.swiper_item .learn{
width: 120px;
height: 40px;
opacity: 1;
background: #ff6918;
border-radius: 4px;
box-shadow: -2px 0px 5px 0px rgba(255,105,23,0.46);
color:#fff;
line-height: 40px;
text-align: center;
border:none;
margin-top:32px;
cursor: pointer;
}
.pointer{
height:80px;
width:100%;
bottom:30px;
justify-content:center;
}
.pointer_item{
width:200px;
height:43px;
line-height: 43px;
text-align: center;
color:#43475F;
background:#E3E8EF;
position:relative;
font-size: 16px;
cursor: pointer;
}
.pointer_item::after{
content: '';
width: 20px;
height: 43px;
display: inline-block;
background: #fff;
transform: skewX(
20deg
);
position: absolute;
right: 200px;
left: -9px;
margin: 0 auto;
}
.pointer_item:first-child{
border-radius: 22px 0 0 22px;
}
.pointer_item:last-child{
border-radius: 0 22px 22px 0;
}
.pointer_item:first-child::after{
content: '';
width:0;
}
.active.pointer_item{
background:linear-gradient(-90deg,#ff501a 0%, #ff8a34 98%);
color:#fff;
}
.contrl{
position:absolute;
top:65%;
width:100%;
}
.contrl .toLeft{
position:absolute
}
.contrl .toRight{
position:absolute
}
.surface{
margin-top:30px;
}
.surface>div:first-child{
width:340px;
height:60px;
line-height: 62px;
border:1px solid #fff;
text-align: center;
color:#fff;
margin:0 auto;
font-size: 20px;
}
.surface>div:nth-child(2){
width:846px;
height:118px;
position:relative;
margin:0 auto;
margin-top:12px;
}
.surface>div:nth-child(2) div:first-child{
width:0;
height:118px;
border-left:1px solid #fff;
position: absolute;
left:425px;
top:-2px;
}
.surface>div:nth-child(2) div:nth-child(2){
width:846px;
height:72px;
border:1px solid #fff;
border-bottom: none;
position:absolute;
top:44px;
}
.surface>div:nth-child(2) .triangle{
width:0;
height:0;
border-left:8px solid rgba(255,255,255,0);
border-right:8px solid rgba(255,255,255,0);
border-top:10px solid #fff;
position:absolute;
bottom:0;
}
.surface>div:last-child{
justify-content: space-between;
margin-top:10px;
padding: 0 10px;
box-sizing: border-box;
}
.surface>div:last-child div{
width:254px;
height:333px;
border:1px solid #fff;
border-radius: 20px;
box-sizing: border-box;
padding: 30px 30px 0;
}
.surface>div:last-child div img{
margin:0 auto;
display:block;
}
.surface>div:last-child div h4{
color:#fff;
font-size:18px;
font-weight: 700;
text-align: center;
}
.surface>div:last-child div ul{
margin-top:25px;
opacity: 0.72;
}
.surface>div:last-child div ul li{
font-size: 14px;
font-weight: 400;
text-align: left;
color: #ffffff;
line-height: 33px;
}
</style>
</head>
<body class="main">
<div id="communityGroup">
<div class="head" style="background: linear-gradient(180deg,#1e68ec 0%, #28c3f9 100%);background-color: #2189f1">
{include file=comm/head.html}
<div class="head-in">
<div class="banner">
<div class="banner-word">
<p class="banner-word-1st" style="color: #fefeff;font-size: 40px;font-weight: bold;margin-top: 50px;">三匠互联新零售解决方案</p>
<p class="banner-word-2nd" style="font-weight: normal;font-size: 22px;letter-spacing: .4px">助力传统零售业转型，</p>
<p class="banner-word-2nd" style="font-weight: normal;font-size: 22px;letter-spacing: .4px">实现消费者、线上商城、实体门店三位一体的零售生态闭环</p>
<div class="banner-word-btn" style="color:#337AFB;font-weight: 800;" onclick="wxclick()">立即咨询</div>
<div class="banner-word-btn free_btn" onclick="showClick()">获取解决方案</div>
</div>
<div class="banner-pic">
<img src="{pboot:sitetplpath}/static/picture/banner.png" alt="三匠互联新零售解决方案">
</div>
</div>
</div>
</div>
<div class="apply">
<div class="applyTitle">
<h2>什么是新零售？</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="applyPic">
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/xls1.svg" alt="消费升级">
<p class="titlep">消费升级</p>
<p>平台、技术、服务的全面升级，重新定义零售模式</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/xls2.svg" alt="线上线下全互通">
<p class="titlep">线上线下全互通</p>
<p>用产品和技术实现线上线下的业务结合，提升购物体验</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/xls3.svg" alt="大数据">
<p class="titlep">大数据</p>
<p>将会员每次消费在后台进行统计并生成智能报表</p>
</div>
<div class="graphic">
<img src="{pboot:sitetplpath}/static/picture/xls4.svg" alt="高效物流">
<p class="titlep">高效物流</p>
<p>全渠道订单统一后台管理平台极速就近配送</p>
</div>
</div>
</div>
<div class="apply" style="height:740px;">
<div class="applyTitle">
<h2>传统零售vs新零售？</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="groupDetail">
<div class="modeLeft">
<dl>
<dt>
<img src="{pboot:sitetplpath}/static/picture/sale1.png" alt="传统零售">
<span>传统零售</span>
</dt>
<dd>
<p>门店经营受时间、空间限制</p>
</dd>
<dd>
<p>经营成本过高、发展受限</p>
</dd>
<dd>
<p>客户购买渠道单一，无法满足客户随时购物</p>
</dd>
<dd>
<p>门店库存较多，缺乏多城市多仓库商城系统</p>
</dd>
</dl>
</div>
<div class="border">
<div class="modeRight">
<div>
<dl>
<dt>
<img src="{pboot:sitetplpath}/static/picture/sale2.png" alt="新零售图标">
<span>新零售</span>
</dt>
<dd>
<img src="{pboot:sitetplpath}/static/picture/yes.png" alt="">
<p>经营不受时间、空间限制</p>
</dd>
<dd>
<img src="{pboot:sitetplpath}/static/picture/yes.png" alt="">
<p>让零售信息化、数据化、智能化</p>
</dd>
<dd>
<img src="{pboot:sitetplpath}/static/picture/yes.png" alt="">
<p>使顾客更具精准、会员粘性加强结合裂变分享营销</p>
</dd>
<dd>
<img src="{pboot:sitetplpath}/static/picture/yes.png" alt="">
<p>打破市场机会、打破传统思维</p>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="apply" style="overflow: hidden;position:relative;">
<div class="applyTitle">
<h2>新零售,赋能传统零售转型升级</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="pointer dis_flex">
<div class="pointer_item active" index="1">
全渠道多终端覆盖
</div>
<div class="pointer_item" index="2">
线上+线下无缝融合
</div>
<div class="pointer_item" index="3">
打破消费场景限制
</div>
</div>
<div class="swiper dis_flex swiper_one" style="">
<div class="swiper_item dis_flex" style="left:0;align-items: center">
<div class="right" style="width:579px;height:370px;text-align: center;">
<img style="width:93%;height:93%;" src="{pboot:sitetplpath}/static/picture/swiper3.png" alt="全渠道多终端覆盖">
</div>
<div class="left">
<div>
<img src="{pboot:sitetplpath}/static/picture/yinhao.png" alt="">
</div>
<h4>全渠道多终端覆盖</h4>
<p>通过新商云搭建电商平台，链接微商城、小程序、<br>App获取用户流量，利用拼团、秒杀、满减满折等<br>热门电商玩法获取更多用户。</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
</div>
<div class="swiper_item dis_flex" style="left:1125px;align-items: center">
<div class="right" style="width:579px;height:438px;text-align: center;">
<img style="width:93%;height:93%;" src="{pboot:sitetplpath}/static/picture/swiper2.png" alt="线上+线下无缝融合">
</div>
<div class="left">
<div>
<img src="{pboot:sitetplpath}/static/picture/yinhao.png" alt="">
</div>
<h4>线上+线下无缝融合</h4>
<p>消费者到门店购物，通过支付，扫码等留存用户信<br>息，并吸引成为线上会员，在线上电商平台享受更<br>多优惠，实现门店引流，线上营销，并满足消费者<br>更多个性化需求。</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
</div>
<div class="swiper_item dis_flex" style="left:2250px;align-items: center">
<div class="right" style="width:579px;height:438px;text-align: center;">
<img style="width:93%;height:93%;" src="{pboot:sitetplpath}/static/picture/swiper1.png" alt="打破消费场景限制">
</div>
<div class="left">
<div>
<img src="{pboot:sitetplpath}/static/picture/yinhao.png" alt="">
</div>
<h4>打破消费场景限制</h4>
<p>新商云新零售赋予了传统商家更多空间，让消费者<br>通过电脑、手机在各个地方都可以在你的平台购物，<br>并享受平台各类优惠活动，享受购物带来的诸多乐<br>趣。</p>
<button class="learn" onclick="wxclick()">了解详情</button>
</div>
</div>
</div>
<div class="contrl">
<div class="toRight" style="right:0;">
<img src="{pboot:sitetplpath}/static/picture/toright.png" alt="">
</div>
<div class="toLeft" style="left:0;">
<img src="{pboot:sitetplpath}/static/picture/toleft.png" alt="">
</div>
</div>
</div>
<div class="apply" style="width:100%;height:842px;margin-top: 90px;background:url('{pboot:sitetplpath}/static/images/bg1.png') no-repeat;background-size:100% 100%;">
<div class="applyTitle editionCenter">
<h2 style="color:#fff;">三匠互联，为你轻松连接人、货、场</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar"></div>
</div>
<div class="surface editionCenter">
<div>线上商城、线下门店融合</div>
<div>
<div></div>
<div></div>
<div class="triangle" style="left:-8px;"></div>
<div class="triangle" style="left: 418px;"></div>
<div class="triangle" style="right:-9px;"></div>
</div>
<div class="dis_flex">
<div>
<img src="{pboot:sitetplpath}/static/picture/ren.png" alt="线上渠道全面连接">
<h4>线上渠道全面连接</h4>
<ul>
<li>① 微商城、小程序、app等。</li>
<li>② 视频直播、拼团、砍价、秒杀、优惠券、预售等。</li>
<li>③ 社交电商全面获客。</li>
</ul>
</div>
<div>
<img src="{pboot:sitetplpath}/static/picture/huo.png" alt="全渠道一体化管理">
<h4>全渠道一体化管理</h4>
<ul>
<li>① 仓库统一管理。</li>
<li>② 全面管理商品、交易订单。</li>
<li>③ 将营销渠道、支付、仓库、物流与消费者融合。</li>
</ul>
</div>
<div>
<img src="{pboot:sitetplpath}/static/picture/chang.png" alt="线上线下智能融合">
<h4>线上线下智能融合</h4>
<ul>
<li>① 线上支付，门店交易。</li>
<li>② 线上线下齐配送。</li>
<li>③ 线上营销，门店引流。</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sixCore">
<div class="sixCore_title">
<h2>三匠互联助力新零售转型升级</h2>
<h3>SANJIANGHULIAN</h3>
<div class="bar" style="right:526px;"></div>
</div>
<div class="sixCore_top">
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/youhui.svg" alt="商城">
</div>
<div>
<p>商城</p>
<p>打造商家独有零售入口<br>搭建自有个性化商城</p>
</div>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/jian.svg" alt="营销">
</div>
<div>
<p>营销</p>
<p>获取新客户，激活老客户<br>提升客户购买转化率</p>
</div>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/fenxiao.svg" alt="分销">
</div>
<div>
<p>分销</p>
<p>分享微信群，招募推广<br>引导分享，店铺销量提升</p>
</div>
</div>
</div>
<div class=" sixCore_bottom">
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/pintuan.svg" alt="会员">
</div>
<div>
<p>会员</p>
<p>定制分销规则，搭建页面<br>分享微信群，招募推广</p>
</div>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/kanjia.svg" alt="商品管理">
</div>
<div>
<p>商品管理</p>
<p>库存数目一目了然<br>设置库存预警不怕没货卖</p>
</div>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/miaosha.svg" alt="订单管理">
</div>
<div>
<p>订单管理</p>
<p>支持订单批量处理<br>支持多种订单打印</p>
</div>
</div>
</div>
<div class=" sixCore_bottom" style="margin-bottom: 95px;">
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/jifen.svg" alt="奖励">
</div>
<div>
<p>奖励</p>
<p>量身定制奖励计划<br>灵活搭配佣金比例</p>
</div>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/yushou.svg" alt="评价">
</div>
<div>
<p>评价</p>
<p>吸引围观，刺激下单<br>激发客户参与、讨论</p>
</div>
</div>
<div class="core">
<div class="pic">
<img src="{pboot:sitetplpath}/static/picture/zhe.svg" alt="统计分析">
</div>
<div>
<p>统计分析</p>
<p>专业数据报表<br>店铺经营全面</p>
</div>
</div>
</div>
<button onclick="kuaizhichat()">获取解决方案</button>
</div>
{include file=comm/foot.html}
</div>
<script>
$('.modeText').on('click','div',function() {
$('.modeText div').removeClass('active')
$(this).addClass('active')
let num = $(this).attr('data-type')
$('.modeImg').attr('src',`/assets/img/2.3.1/mode${num}.png`)
})
var _index = 1;
var _width = Number($('.swiper').css('width').split('px')[0])
var intervalId; //定时器
var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
//自动轮播功能 使用定时器
// autoNextPage();
function autoNextPage(){
intervalId = setInterval(function(){
nextPage();
},5000);
}
$('.pointer_item').on('click',function() {
$('.pointer_item').removeClass('active')
// $(this).addClass('active')
_index = $(this).attr('index')-1;
nextPage();
})
$('.toLeft').on('click',function() {
var targetLeft = 0;
$(buttonSpan[_index-1]).removeClass('active');
if(_index == 1){//到最后一张，直接跳到第一张
_index = 3;
targetLeft = -(_width*(_index-1));
}else{
_index--;
targetLeft = _index == 1 ? 0 : -(_width*(_index-1));
}
$('.swiper_one').animate({left:targetLeft+'px'});
//更新后的圆点加上样式
$(buttonSpan[_index-1]).addClass('active');
})
$('.toRight').on('click',function() {
_index + 1
nextPage()
})
function nextPage(){
var targetLeft = 0;
$(buttonSpan[_index-1]).removeClass('active');
if(_index == 3){//到最后一张，直接跳到第一张
targetLeft = 0;
_index = 1;
}else{
_index++;
targetLeft = -(_width*(_index-1));
}
$('.swiper_one').animate({left:targetLeft+'px'});
//更新后的圆点加上样式
$(buttonSpan[_index-1]).addClass('active');
}
</script>
</body>
</html>