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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
第一个无线电台是由谁发明的
2021/03/01 无线电
php实现jQuery扩展函数
2009/10/30 PHP
php封装的smarty类完整实例
2016/10/19 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python获取当前日期和时间的方法
2015/04/30 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
公务员培训心得体会
2013/12/28 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
节约用水倡议书
2014/04/16 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
献爱心活动总结
2014/05/07 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
教师节晚会主持词
2015/06/30 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书