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. ODOO14 ---系统启动方式

    一.通过pycharm启动 1.配置启动面板: 点击启动即可: 第二种.通过CMD窗口启动:进入到odoo-bin的目录下,执行:python E:\odoo14\odoo14\odoo-bin  这 ...

  2. HCNA Routing&Switching之OSPF缺省路由发布

    前文我们了解了OSPF的度量值,以及基础配置命令的总结,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15069632.html:今天我们来聊一聊在ospf里动 ...

  3. 论文笔记：（2019CVPR）PointConv: Deep Convolutional Networks on 3D Point Clouds

    目录 摘要 一.前言 1.1直接获取3D数据的传感器 1.2为什么用3D数据 1.3目前遇到的困难 1.4现有的解决方法及存在的问题 二.本文idea 2.1 idea来源 2.2 初始思路 2.3 ...

  4. Python RPC 不会？不妨看看这篇文章

    1. 前言 大家好,我是安果! RPC,全程为 Remote Procedure Call,是一种进程间的通信方式,它采用「 服务端 / 客户机 」模式,是一种请求响应模型 其中,服务端负责提供服务程 ...

  5. 杭电OJ 输入输出练习汇总

    主题 Calculate a + b 杭电OJ-1000 Input Each line will contain two integers A and B. Process to end of fi ...

  6. 月薪60k，仍无人问津，腾讯阿里到底有多缺这类程序员？

    不知道大家发现没,近几年,国内对音视频人才需求越来越大了,在某招聘网站上居然薪酬高达60k. 从未来的大趋势来看,随着5G时代的到来,音视频慢慢变成人们日常生活中的必须品.除了在线教育.音视频会议.即 ...

  7. 通过Appium日志，分析其运行原理

    1.启动appium: appium的rest http 接口开始监听 4723 端口: 2.运行 python 脚本: appium接收到一个post请求 /wd/hub/session,并携带了 ...

  8. 06.I/O操作

    参考文章 https://www.cnblogs.com/xuwenfeng/articles/2238127.html 1. 驱动器操作 在Windows操作系统中,存储介质统称为驱动器,硬盘由于可 ...

  9. JVM学习笔记-第三章-垃圾收集器与内存分配策略

    JVM学习笔记-第三章-垃圾收集器与内存分配策略 tips:对于3.4之前的章节可见博客:https://blog.csdn.net/sanhewuyang/article/details/95380 ...

  10. Linux - curl -w 参数详解

    -w 的作用 完成请求传输后,使 curl 在 stdout 上显示自定义信息 格式是一个字符串,可以包含纯文本和任意数量的变量 输出格式 输出格式中的变量会被 curl 用对应的值替换掉 所有变量的 ...