主要有两部分: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");
});

焦点轮播图(tab轮播)的更多相关文章

  1. Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View

    最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...

  2. js各种特效轮播图,选项卡,放大镜,窗口拖拽,楼层跳转

    // 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...

  3. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  4. 轮播图js编写

    //面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...

  5. BootStrap学习(7)_轮播图

    一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...

  6. 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  7. 解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图

    我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 import {ViewChi ...

  8. HTML+CSS使用swiper快速生成最简单、最快捷、最易看懂的轮播图

    1.  在网页顶部输入swiper.com.con,进入swiper官网 2.   点击" API文档",获取轮播图代码的地方 3.   点击左侧"swiper初始化&q ...

  9. web手工项目02-注册功能输入分析,处理,输出方法-测试用例及缺陷编写-首页轮播图和购物车

    web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...

  10. 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存

    1.   课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...

随机推荐

  1. pandas.read_csv参数详解

    读取CSV(逗号分割)文件到DataFrame 也支持文件的部分导入和选择迭代 更多帮助参见:http://pandas.pydata.org/pandas-docs/stable/io.html 参 ...

  2. uva 10917 Walk Through The Forest

    题意: 一个人从公司回家,他可以从A走到B如果从存在从B出发到家的一条路径的长度小于任何一条从A出发到家的路径的长度. 问这样的路径有多少条. 思路: 题意并不好理解,存在从B出发到家的一条路径的长度 ...

  3. Linux 文件读写操作与磁盘挂载

    文件读写 [文件描述符] Linux下,通常通过open打开一个文件,它然后返回给我们一个整数,通过这个整数便可以操作文件,这个整数我们称文件描述符(fd).对应被打开的文件,它也是一种系统资源,那么 ...

  4. PAT 1082. 射击比赛 (20)

    本题目给出的射击比赛的规则非常简单,谁打的弹洞距离靶心最近,谁就是冠军:谁差得最远,谁就是菜鸟.本题给出一系列弹洞的平面坐标(x,y),请你编写程序找出冠军和菜鸟.我们假设靶心在原点(0,0). 输入 ...

  5. 你真的会websocket吗

    Websocket WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端. WebSocket通信协议于2 ...

  6. 典型分布式系统分析之MapReduce

    在 <分布式学习最佳实践:从分布式系统的特征开始(附思维导图)>一文中,提到学习分布式系统的一个好方法是思考分布式系统要解决的问题,有哪些衡量标准,为了解决这些问题:提出了哪些理论.协议. ...

  7. vue-cli的使用

    1.安装node https://nodejs.org/en/download/ 2.webpack安装[我选全局安装] 全局安装 npm install --global webpack 本地安装 ...

  8. JavaScript数据结构与算法(六) 链表的实现

    // 链表存储有序的元素集合,但不同于数组,链表中的元素在内存中并不是连续放置的.每个 // 元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成.下图展 // 示了一个链表的 ...

  9. [LeetCode] Max Chunks To Make Sorted 可排序的最大块数

    Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...

  10. [LeetCode] My Calendar II 我的日历之二

    Implement a MyCalendarTwo class to store your events. A new event can be added if adding the event w ...