焦点轮播图（tab轮播）
主要有两部分：1、列表导航（小图片）
2、展示区（大图片）
页面布局：
HTML部分：
<div class="s_conC">
<!-- 导航 -->
<div class="s_nav">
<div class="on">
<p>1、夹在耳垂</p>
</div>
<div>
<p>2、刺激神经</p>
</div>
<div>
<p>3、改善电波</p>
</div>
<div>
<p>4、分泌递质</p>
</div>
<div>
<p>5、恢复正常</p>
</div>
</div>
<!-- 内容 -->
<div class="sCon ">
<div class="list">
<div class="xImg1 left"></div>
<div class="step1 left">
<p class="titl"><i>Step1</i> : 夹在耳垂</p>
<p class="c">安思利普治疗仪通过耳夹电极将特殊设计的电信号传导到大脑，进而产生作用。纯物理疗法，0副作用。</p>
</div>
</div>
<div class="list">
<div class="xImg2 left"></div>
<div class="step2 left">
<p class="titl2"><i>Step2</i> : 刺激神经</p>
<p class="c_2">失眠睡不着会扰乱人的正常脑电波，而脑电波的紊乱又会加重睡眠障碍。EEG脑电波刺激疗法能够使紊乱的脑电波回归正常，从而减轻睡眠障碍程度。</p>
</div>
</div>
<div class="list">
<div class="xImg3 left"></div>
<div class="step3 left">
<p class="titl3"><i>Step3</i> : 改善电波</p>
<p class="c_3">耳夹电极将主机产生的特殊波形的电流传导到脑部，刺激大脑中枢神经系统，将影响睡眠和情绪的异常脑电波“拨乱反正”，并调节神经递质的分泌。</p>
</div>
</div>
<div class="list">
<div class="xImg4 left"></div>
<div class="step4 left">
<p class="titl4"><i>Step4</i> : 分泌递质</p>
<p class="c_4">大脑中存在着一些调控情绪的“信使”，即由脑细胞分泌的神经递质，EEG能够很好的调节神经递质的分泌，进而改善情绪和睡眠。</p>
</div>
</div>
<div class="list">
<div class="xImg5 left"></div>
<div class="step5 left">
<p class="titl5"><i>Step5</i> : 回复正常</p>
<p class="c_5">长期失眠，导致了焦虑、抑郁的产生，而焦虑、抑郁情绪又会进一步加重失眠。通过上述作用，改善失眠、焦虑和抑郁，使病人摆脱这两者的“恶性循环”。</p>
</div>
</div>
</div>
</div>
css部分：
.s_conC{width: 94%;margin: 0 auto;border-radius: 5px;background: #fff;}
.s_nav{height: 0.5rem;background: #EEE;border-radius: 5px;}
.s_nav div{float: left;font-size: 0.15rem;width: 20%;text-align: center;height: 0.6rem;border-radius: 5px;}
.on{background: url("../img/tb_26.png")no-repeat;background-size: contain;}
.sCon{margin-top: .3rem;height: 2.3rem;}
.list{display: none;}
.xImg1,.xImg2,.xImg3,.xImg4,.xImg5{width: 41%;height: 2rem;background-size: contain;margin-left: 0.1rem;}
.step1,.step2,.step3,.step4,.step5{width:54%;height: 2rem;background-size: contain;margin-left: 2.rem;}
.xImg1{background: url("../img/step1_30.png")no-repeat;background-size: contain;margin-left: 0.1rem;}
.titl,.titl2,.titl3,.titl4,.titl5{font-size: 0.2rem;position: relative;top: -0.2rem;left: 0.2rem;color: #2BA3AF;}
.c,.c_2,.c_3,.c_4,.c_5{text-indent: 0.4rem;font-size: 0.2rem;line-height:0.3rem;padding-left: 0.2rem;position: relative;top: -0.3rem;}
.xImg2{background: url("../img/step2_30.png")no-repeat;background-size: contain;}
.xImg3{background: url("../img/ste3_03.png")no-repeat;background-size: contain;}
.xImg4{background: url("../img/ste4_03.png")no-repeat;background-size: contain;}
.xImg5{background: url("../img/step5_30.png")no-repeat;background-size: contain;}
js部分：$(function(){
// table切换
function tabs(tabTit,on,tabCon){
$(tabCon).each(function(){
$(this).children().eq(0).show();
});
$(tabTit).each(function(){
$(this).children().eq(0).addClass(on);
});
$(tabTit).children().click(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
}
tabs(".s_nav","on",".sCon");
});
