html部分：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />

        <title>3-1 tab切换综合示例</title>

        <link rel="stylesheet" type="text/css" href="js/swiper/idangerous.swiper2.7.6.css" />

        <link rel="stylesheet" type="text/css" href="css/index.css"/>

    </head>

    <body>

        <div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide bg-1png"></div>

                <div class="swiper-slide bg-2png"></div>

                <div class="swiper-slide bg-3png"></div>

                <div class="swiper-slide bg-4png"></div>

            </div>

        </div>

        <div class="tabs">

            <a href="" class="active">首页</a>

            <a href="">课程</a>

            <a href="">发现</a>

            <a href="">我的</a>

        </div>

        <script type="text/javascript" src="js/jquery/jquery-1.10.1.min.js"></script>

        <script type="text/javascript" src="js/swiper/idangerous.swiper2.7.6.min.js"></script>

        <script type="text/javascript" src="js/index.js"></script>

    </body>

</html>

CSS：

@charset "utf-8";

*{

    margin: 0;

    padding: 0;

}

html,body{

    width: 100%;

    height: 100%;

}

.swiper-container,

.swiper-wrapper,

.swiper-slide{

    width:100%;

    height: 100%;

}

.bg-red{

    background: darkred;

}

.bg-blue{

    background: royalblue;

}

.bg-green{

    background: darkgreen;

}

.bg-1png{

    background: url(../image/001.png);

    background-size: cover;

}

.bg-2png{

    background: url(../image/002.png);

    background-size: cover;

}

.bg-3png{

    background: url(../image/003.png);

    background-size: cover;

}

.bg-4png{

    background: url(../image/004.png);

    background-size: cover;

}

.tabs{

    position: fixed;

    left: 0;

    bottom: 0;

    height: 45px;

    line-height: 45px;

    background: white;

    color: black;

    z-index: 999;

    width: 100%;

    border-top: 1px solid #ddd;

}

.tabs a{

    display: inline-block;

    width: 23%;

    text-align: center;

    font-size: 14px;

    color: #333;

    text-decoration: none;

}

.tabs a.active{

    color: #e40;

    background: #ddd;

}

.swiper-scrollbar{

    position: absolute;

    bottom: 5px;

    left: 0;

    width: 100%;

    height: 10px;

    background: #fff;

    z-index: 999;

}

JS：

// demo1 垂直滚动

/* var swiper = new Swiper('.swiper-container',{

    mode:'vertical'

}); */

//demo2 progress插件

/* var swiper = new Swiper('.swiper-container',{

    progress:true,

    onProgressChange:function(swiper){

        //获取每个slide的progress属性，并设定其现在角度以及旋转后角度

        //例如当前活动slide是0，向左拖动则变成1，进行360度旋转，向右拖动则变成-1，进行-360度旋转

        for(var i=0;i<swiper.slides.length;i++){

            var slide = swiper.slides[i];

            var progress = slide.progress;

            swiper.setTransform(slide,'rotate('+ 360*progress +'deg)');

        }

    },

    onSetWrapperTransition:function(swiper,speed){

        for(var i=0;i<swiper.slides.length;i++){

            swiper.setTransition(swiper.slides[i],speed);

        }

    }

}); */

//demo3 3d-flow插件使用

/* var swiper = new Swiper('.swiper-container',{

    tdFlow:{

        rotate:60,

        stretch:40,

        depth:100,

        modifier:1,

        shadows:true

    }

});

 */

//demo4 scroll-bar插件使用

/* var swiper = new Swiper('.swiper-container',{

    scrollbar:{

        container:'.swiper-scrollbar',

        draggable:true,

        hide:true,

        snapOnRelease:true

    }

}); */

//tabs切换综合示例

var swiper = new Swiper('.swiper-container',{

    onSlideChangeStart:function(swiper){

        var index = swiper.activeIndex;

        $('.tabs a').removeClass('active');

        $('.tabs a').eq(index).addClass('active');

    }

});

$('.tabs a').click(function(e){

    e.preventDefault();

    var index = $(this).index();

    $('.tabs a').removeClass('active');

    $(this).addClass('active');

    swiper.swipeTo(index);

    return false;

});

swiper tabs综合示例的更多相关文章

  1. Spring MVC 学习总结（四）——视图与综合示例

    一.表单标签库 1.1.简介 从Spring2.0起就提供了一组全面的自动数据绑定标签来处理表单元素.生成的标签兼容HTML 4.01与XHTML 1.0.表单标签库中包含了可以用在JSP页面中渲染H ...

  2. C#与数据库访问技术总结（七）综合示例

    综合示例 说明:前面介绍了那么多,光说不练假把式,还是做个实例吧. 表:首先你要准备一张表,这个自己准备吧.我们以学生表为例. 1.ExecuteScalar方法 ExecuteScalar方法执行返 ...

  3. 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...

  4. LayUI后台管理与综合示例

    一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...

  5. ElasticSearch7.3学习(三十二)----logstash三大插件（input、filter、output）及其综合示例

    1. Logstash输入插件 1.1 input介绍 logstash支持很多数据源,比如说file,http,jdbc,s3等等 图片上面只是一少部分.详情见网址:https://www.elas ...

  6. retrofit okhttp RxJava bk Gson Lambda 综合示例【配置】

    项目地址:https://github.com/baiqiantao/retrofit2_okhttp3_RxJava_butterknife.git <uses-permission andr ...

  7. 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续2篇-模板导出综合示例）

    自ExcelUtility类推出以来,经过项目中的实际使用与不断完善,现在又做了许多的优化并增加了许多的功能,本篇不再讲述原理,直接贴出示例代码以及相关的模板.结果图,以便大家快速掌握,另外这些示例说 ...

  8. 前端MVC Vue2学习总结（七）——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...

  9. Spring Boot 2.x 综合示例-整合thymeleaf、mybatis、shiro、logging、cache开发一个文章发布管理系统

    一.概述 经过HelloWorld示例(Spring Boot 2.x 快速入门(上)HelloWorld示例)( Spring Boot 2.x 快速入门(下)HelloWorld示例详解)两篇的学 ...

随机推荐

  1. PAT甲级：1089 Insert or Merge (25分)

    PAT甲级:1089 Insert or Merge (25分) 题干 According to Wikipedia: Insertion sort iterates, consuming one i ...

  2. ASM入网小助手卸载

    目录 ASM小助手卸载 写在前的 卸载 解除U盘禁用 写在后的 ASM小助手卸载 写在前的 有些公司内网的上网认证是用的ASM小助手,不过有时候用自己电脑接入公司内网可能会主动下载到ASM入网小助手的 ...

  3. python安装pyeda库--windows版

    本页介绍了如何购买自己的PyEDA闪亮副本.PyEDA项目的主要目标是成为主流的Python软件包,并遵守社区中遵守的大多数约定. 支持平台 PyEDA支持Windows以及任何带有C编译器的平台.作 ...

  4. 搭建NodeJS开发环境

    Windows10下搭建NodeJS开发环境 ======================================== 下载 NodeJS 安装包,最好使用LTS长期支持正式版 下载见 如下链 ...

  5. Django中ORM是啥？

    ORM是啥是许多Django新手的苦恼. ORM中的"O"就是object,也就是我们说的对象:R指的是relations关系:M指的是mapping也就是映射.所以ORM是对象- ...

  6. tomcat与springmvc 结合 之---第19篇(下,补充) springmvc 加载.xml文件的bean标签的过程

    writedby 张艳涛,上一篇写了springmvc对<mvc:annoXXXX/>标签的解析过程,其实是遗漏重要的细节,因为理解的不深入吧 今天接着解析<bean>标签 & ...

  7. css问题记录

    1.flex:1元素被子元素撑开,将该元素overflow不为visible,构造BFC,或子元素脱离文档流

  8. react native踩坑记录

    一 .安装 1.Python2 和Java SE Development Kit (JDK)可以直接通过腾讯电脑关键安装, Android SDK安装的时候路径里不能有中文和空格 2.配置java环境 ...

  9. 键盘和鼠标闲置超时时关闭显示器并锁定电脑桌面的AutoHotkey脚本 2019年11月24日写

    /* 键盘和鼠标闲置超时时关闭显示器并锁定电脑桌面的AutoHotkey脚本 2019年11月24日写 在电脑桌面锁定时移动鼠标就会显示登录界面,此时即使超过电源设置的时间电脑也不会关闭显示器使得屏幕 ...

  10. 【问题记录】- 谷歌浏览器 Html生成PDF

    起因: 由于项目需要实现将网页静默打印效果,那么直接使用浏览器打印功能无法达到静默打印效果. 浏览器打印都会弹出预览界面(如下图),无法达到静默打印. 解决方案: 谷歌浏览器提供了将html直接打印成 ...