脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → swiper4移动端导航栏tab滑动切换

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

 更新时间：2020年10月16日 17:12:05   作者：萌面怪瘦呀  
这篇文章主要为大家详细介绍了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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现旋转大风车

    js实现旋转大风车

    这篇文章主要为大家详细介绍了js实现旋转大风车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 小程序转发探索示例

    小程序转发探索示例

    这篇文章主要介绍了小程序转发探索示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 遍历DOM对象内的元素属性示例代码

    遍历DOM对象内的元素属性示例代码

    如何遍历DOM对象内的元素属性，例如要获取一个id为btn的按钮的所有属性该怎么实现呢？下面有个不错的教程，大家可以参考下
    2014-02-02
  • 浅析JavaScript中严格模式的使用

    浅析JavaScript中严格模式的使用

    在ECMAScript5标准中，JavaScript提出了严格模式的概念（Strict Mode），本文就来和大家简单讲讲JavaScript中严格模式的具体使用，感兴趣的可以了解一下
    2023-05-05
  • 微信小程序实现禁止分享代码实例

    微信小程序实现禁止分享代码实例

    这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 选择与取消选择不错的应用 js

    选择与取消选择不错的应用 js

    选择与取消选择不错的应用 js...
    2006-12-12
  • 简单实现Bootstrap标签页

    简单实现Bootstrap标签页

    这篇文章主要教大家简单实现Bootstrap标签页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript 在各个浏览器中执行的耐性

    JavaScript 在各个浏览器中执行的耐性

    经常会遇到这样一个情况：浏览器弹出对话框，提示脚本运行时间过长，询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框呢？
    2009-04-04
  • 分享纯手写漂亮的表单验证

    分享纯手写漂亮的表单验证

    最近没有项目做，闲来没事，于是自己动手写了几个表单验证，特此分享供大家参考
    2015-11-11
  • JS实现拖拽元素时与另一元素碰撞检测

    JS实现拖拽元素时与另一元素碰撞检测

    这篇文章主要为大家详细介绍了JS实现拖拽元素时与另一元素碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论