焦点轮播图(tab轮播)

主要有两部分:1、列表导航(小图片)

       2、展示区(大图片)

 

页面布局:

              HTML部分:

       


                    
                    

                        

                            

1、夹在耳垂


                        

                        

                            

2、刺激神经


                        

                        

                            

3、改善电波


                        

                        

                            

4、分泌递质


                        

                        

                            

5、恢复正常


                        

                    

                    
                    

                        

                            

                            

                                

Step1 : 夹在耳垂


                                

安思利普治疗仪通过耳夹电极将特殊设计的电信号传导到大脑,进而产生作用。纯物理疗法,0副作用。


                            

                        

                        

                            

                            

                                

Step2 : 刺激神经


                                

失眠睡不着会扰乱人的正常脑电波,而脑电波的紊乱又会加重睡眠障碍。EEG脑电波刺激疗法能够使紊乱的脑电波回归正常,从而减轻睡眠障碍程度。


                            

                        

                        

                            

                            

                                

Step3 : 改善电波


                                

耳夹电极将主机产生的特殊波形的电流传导到脑部,刺激大脑中枢神经系统,将影响睡眠和情绪的异常脑电波“拨乱反正”,并调节神经递质的分泌。


                            

                        


                        

                            

                            

                                

Step4 : 分泌递质


                                

大脑中存在着一些调控情绪的“信使”,即由脑细胞分泌的神经递质,EEG能够很好的调节神经递质的分泌,进而改善情绪和睡眠。


                            

                        

                        

                            

                            

                                

Step5 : 回复正常


                                

长期失眠,导致了焦虑、抑郁的产生,而焦虑、抑郁情绪又会进一步加重失眠。通过上述作用,改善失眠、焦虑和抑郁,使病人摆脱这两者的“恶性循环”。


                            

                        

                    


                

 

     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");
});

转载于:https://www.cnblogs.com/duxingdexin/p/8861443.html

你可能感兴趣的:(焦点轮播图(tab轮播))