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. Java 加载、操作和保存WPS文字文档

    本文通过Java程序代码来展示如何来加载.操作及保存WPS格式的文字文档. 一.基本步骤:加载时,通过流加载WPS文字文档,完成相关文字操作后,再将结果文档保存到流,将流写入WPS文档,闭关闭流. 二 ...

  2. 如何在 PyCharm 中设置 Python 代码模板

    #!/usr/bin/env python # -*- coding: utf-8 -*- # Created by iFantastic on $DATE if __name__ == '__mai ...

  3. P5042 丢失的题面

    P5042 丢失的题面 顺序:10 - 1 - 7 - 8 - 9 - 4 - 5 - 6 - 2 - 3 Point 10 读入,特判,输出. 读入的英文意思是让选手输出自己的程序本身,这个题的确存 ...

  4. [考试总结]noip模拟26

    首先看到这样中二的题目心头一震.... 然而发现又是没有部分分数的一天. 然而正解不会打.... 那还是得要打暴力. 但是这套题目有两个题目只有一个参数. 所以... (滑稽).jpg 然后我就成功用 ...

  5. WEB安全新玩法 [10] 防范竞争条件支付漏洞

    服务器端业务逻辑,特别是涉及数据库读写时,存在着关键步骤的时序问题,如果设计或代码编写不当就可能存在竞争条件漏洞.攻击者可以利用多线程并发技术,在数据库的余额字段更新之前,同时发起多次兑换积分或购买商 ...

  6. vue、gulp、webpack踩过的坑和笔记

    1.监听流错误 stream-combiner2 2.热更新Browsersync与element冲突,换成gulp-connect 3.gulp-uglify压缩js不能压缩es6 4.使用vue- ...

  7. JVM参数模版

    首先需要自己根据机器的配置设置JVM中各区域的初步大小,如下: -Xms4096M-Xmx4096M-Xmn3072M-Xss1M-XX:MetaspaceSize=256M-XX:MaxMetasp ...

  8. C++ 多态 案例（//多态案例----制作饮品 //描述：煮水 冲泡 倒入杯中 加入辅料）

    1 //多态案例----制作饮品 2 //描述:煮水 冲泡 倒入杯中 加入辅料 3 4 #include <iostream> 5 #include <string> 6 us ...

  9. C++ //多态案例 -计算器类（普通写法 和 多态写法） //利用多态实现计算器 //多态好处： //1.组织结构清晰 //2.可读性强 //3.对于前期和后期扩展以及维护性高

    1 //多态案例 -计算器类(普通写法 和 多态写法) 2 3 #include <iostream> 4 #include <string> 5 using namespac ...

  10. 【剑指offer】65. 不用加减乘除做加法

    剑指 Offer 65. 不用加减乘除做加法 知识点:数学:位运算 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用 "+"."-"."* ...