swiper tabs综合示例
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综合示例的更多相关文章
- Spring MVC 学习总结（四）——视图与综合示例
一.表单标签库 1.1.简介 从Spring2.0起就提供了一组全面的自动数据绑定标签来处理表单元素.生成的标签兼容HTML 4.01与XHTML 1.0.表单标签库中包含了可以用在JSP页面中渲染H ...
- C#与数据库访问技术总结（七）综合示例
综合示例 说明:前面介绍了那么多,光说不练假把式,还是做个实例吧. 表:首先你要准备一张表,这个自己准备吧.我们以学生表为例. 1.ExecuteScalar方法 ExecuteScalar方法执行返 ...
- 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
- LayUI后台管理与综合示例
一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...
- ElasticSearch7.3学习(三十二)----logstash三大插件（input、filter、output）及其综合示例
1. Logstash输入插件 1.1 input介绍 logstash支持很多数据源,比如说file,http,jdbc,s3等等 图片上面只是一少部分.详情见网址:https://www.elas ...
- retrofit okhttp RxJava bk Gson Lambda 综合示例【配置】
项目地址:https://github.com/baiqiantao/retrofit2_okhttp3_RxJava_butterknife.git <uses-permission andr ...
- 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库：ExcelUtility （续2篇-模板导出综合示例）
自ExcelUtility类推出以来,经过项目中的实际使用与不断完善,现在又做了许多的优化并增加了许多的功能,本篇不再讲述原理,直接贴出示例代码以及相关的模板.结果图,以便大家快速掌握,另外这些示例说 ...
- 前端MVC Vue2学习总结（七）——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- Spring Boot 2.x 综合示例-整合thymeleaf、mybatis、shiro、logging、cache开发一个文章发布管理系统
一.概述 经过HelloWorld示例(Spring Boot 2.x 快速入门(上)HelloWorld示例)( Spring Boot 2.x 快速入门(下)HelloWorld示例详解)两篇的学 ...
随机推荐
- Linux核心目录结构
------------恢复内容开始------------ 目录 含义及作用 /usr/bin 普通用户二进制命令目录 /usr/sbin root管理员用户使用的二进制命令目录 /boot 内核程 ...
- 扩展欧几里得(exgcd)-求解不定方程/求逆元
贝祖定理:即如果a.b是整数,那么一定存在整数x.y使得ax+by=gcd(a,b).换句话说,如果ax+by=m有解,那么m一定是gcd(a,b)的若干倍.(可以来判断一个这样的式子有没有解)有一个 ...
- 记一次系统崩溃事件【Mac版】
事件:Mac系统崩溃,导致电脑数据丢失,以及数据安全备份措施的不到位的教训! 解决措施: 1.开机后按:Command+R 按开机键 ,进入Mac 实用工具, 选择磁盘工具.由于没有备份直接抹掉磁盘. ...
- 10分钟物联网设备接入阿里云IoT平台
前言最近尝试了一下阿里云IoT物联网平台,还是蛮强大的.在此记录一下学习过程.本教程不需要任何外围硬件,一台电脑和一根能上网的网线即可.算是一篇Hello World了.先上效果图 第一章 准备工作1 ...
- 通过jstack日志分析和问题排查
简介 jstack用于生成java虚拟机当前时刻的线程快照.线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合,生成线程快照的主要目的是定位线程出现长时间停顿的原因,如线程间死锁.死循环 ...
- swagger json导出word，Typora软件推荐！！！
场景: 前几天项目验收,赶了一整天补API接口设计文档,给爷整吐了.周末的时候就想能不能直接把swagger的json文件导出成word? 顺便学习一下NPOI的使用. 实现思路: 1.先把swaag ...
- anyRTC 6月SDK更新迭代
anyRTC 6月更新迭代,macOS新增屏幕 ID 进行屏幕共享功能,让共享更高效简单:此外解决了视频的宽高不是16:9导致共享内容缺失的问题,同时对音视频模块,推流组件等多项功能进行了优化改进. ...
- ;~ 小部分AutoHotkey脚本源代码测试模板样板.ahk
; ;~ 小部分AutoHotkey脚本源代码测试模板样板.ahk ;~ 请把一行或几行少量代码放到此文件中实际测试一下,;~ 看看测试结果如何,等到能够实现代码功能时再复制到自己的脚本代码文件中;~ ...
- Mybatis学习笔记-注解开发
面向接口编程 根本原因:[解耦],[可拓展],[更高规范性] 接口类型: abstract class interface 使用注解开发 简单语句可用注解开发(直接查询,列名与属性名相同) 本质:反射 ...
- 关于document.write()方法重绘页面问题
学习的时候,document.write()被告知是用来将内容写进页面里面,同时也被告知document.write()方法会重绘页面,但是关于什么时候会重绘,什么时候不会重绘页面没有太多解释. 首先 ...