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. 微信小程序云开发-云开发环境配置工作

    一.注册小程序 打开[微信开发者工具],点击界面上的[注册],进入注册微信小程序页面.(也可以直接进入微信小程序注册地址:https://mp.weixin.qq.com/进行注册) 进入[小程序注册 ...

  2. 在Rancher中修改K8S服务参数的万金油法则

    作者简介 王海龙,Rancher中国社区技术经理,负责Rancher中国技术社区的维护和运营.拥有7年的云计算领域经验,经历了OpenStack到Kubernetes的技术变革,无论底层操作系统Lin ...

  3. POJ1944

    poj1944 一道我不会做的贪心题. (思维才是OI的重点) 但是if您也不会,那就来听我瞎扯吧. 首先,这个图是一个圈,只能连接邻点,使所有求的点联通. 我们先不考虑环,那么就可以想出一个假的做法 ...

  4. Python自动化测试面试题-性能篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  5. npm命令，nrm命令，n命令, nvm命令

    npm命令 npm/yarn config set registry https://registry.npm.taobao.org 设置淘宝镜像npm/yarn config get registr ...

  6. Spring WebFlow 远程代码执行漏洞（CVE-2017-4971）

    影响版本 Spring WebFlow 2.4.0 - 2.4.4 访问id为1的酒店http:/ :8080/hotels/1,点击预订按钮"Book Hotel",填写相关信息 ...

  7. Docker 网络解读

    Docker 容器在运行时,会涉及多个容器相互连接,甚至与宿主机上的应用连接的问题.既然需要产生连接,那么就必然要依赖网络. 网络在Docker的技术体系中,是一个不容易搞清楚的要点.因此,希望您读完 ...

  8. 五、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之MVVM中的EventAggregator

    这一篇我们主要再看完示例12.13后,写了个例子,用于再Modules下执行ApplicationCommands,使用IActiveAware执行当前View的Commands,或者Applicat ...

  9. 一张图说明 iaas paas saas的区别

    图片来源:https://www.bilibili.com/video/BV1QJ411S7c4  P2 云服务的三种模式 1laaS(基础设施即服务) laas(Infrastructure as ...

  10. 解决java种mysql中文乱码问题

    乱码问题原因有多种,其中有一种是由于MySQL默认使用 ISO-8859-1 ( 即Latin1 ) 字符集,而JAVA内部使用Unicode编码,因此在JAVA中向MYSQL数据库插入数据时,或者读 ...