swiper4实现移动端导航栏tab滑动切换


Posted in Javascript onOctober 16, 2020

swiper4移动端导航栏tab滑动切换效果,供大家参考,具体内容如下

效果如图:

swiper4实现移动端导航栏tab滑动切换

首先引入swiper的css和js文件
官网下载地址

<link href="swiper.min.css" rel="stylesheet">
<script src="swiper.min.js"></script>

html结构部分

<body>
 <div class="tab">
 <div class="tabItem active">slider1</div>
 <div class="tabItem">slider2</div>
 </div>
 <div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide">slider1</div>
  <div class="swiper-slide">slider2</div>
 </div> 
 </div> 
</body>

js部分

var tabItem = $('.tab .tabItem');
var mySwiper = new Swiper('.swiper-container', {
 autoplay: false,
 on:{
 //swiper从当前slide开始过渡到另一个slide时执行
 slideChangeTransitionStart: function(){
 var n = this.activeIndex;//过渡后的slide索引
 changeTab(n);
  }
 }
})
//tab点击切换silde
tabItem.click(function(){
 var ind = $(this).index();
 changeTab(ind);
 mySwiper.slideTo(ind);
})
//tab切换样式
function changeTab(index){
 tabItem.removeClass('active').eq(index).addClass('active');
}

css部分

html,body{width: 100%;height: 100%;}
div{margin: 0;padding: 0;}
.swiper-container,.swiper-wrapper,.swiper-slide{width: 100%;height: 100%;}
.swiper-slide{display: flex;align-items: center;justify-content: space-around;}
.tab{width: 100%;height: 50px;overflow: hidden;border-bottom: 1px solid #eee;position: fixed;top: 0;left: 0;z-index: 999;}
.tabItem{width: 50%;height: 50px;float: left;background: #e5e5e5;line-height: 50px;text-align: center;}
.active{background: #FE2D26;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery时间验证和转换工具小例子
Jul 01 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
jQuery实现简单全选框
Sep 13 jQuery
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 #Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 #Javascript
JS highcharts实现动态曲线代码示例
Oct 16 #Javascript
Swiper实现导航栏滚动效果
Oct 16 #Javascript
node.js通过url读取文件
Oct 16 #Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 #Javascript
Vue3.0的优化总结
Oct 16 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
那些年一起学习的PHP(一)
2012/03/21 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python中is与==判断的区别
2017/03/28 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
django-filter和普通查询的例子
2019/08/12 Python
pandas数据处理进阶详解
2019/10/11 Python
Python with标签使用方法解析
2020/01/17 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
销售自荐信
2013/10/22 职场文书
函授本科自我鉴定
2014/02/04 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书