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

swiper4实现移动端导航切换

 更新时间：2020年10月16日 09:01:23   作者：葉幺  
这篇文章主要为大家详细介绍了swiper4实现移动端导航切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下

首先导入

<link rel="stylesheet" href="css/swiper.min.css" >
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>(这里用的是Swiper 4.0.7版本)

在写入html内容

<div id=header>
 <div class="head-top">
 <h3>商品分类</h3>
 </div>
 <div id="nav" class="swiper-container">
 <ul class="swiper-wrapper">
 <li class="swiper-slide active-nav"><a href="javascript:;" >手机</a></li>
 <li class="swiper-slide"><a href="javascript:;">厨具</a></li>
 <li class="swiper-slide"><a href="javascript:;">数码</a></li>
 <li class="swiper-slide"><a href="javascript:;">家纺</a></li>
 <li class="swiper-slide"><a href="javascript:;">生鲜</a></li>
 <li class="swiper-slide"><a href="javascript:;">家用电器</a></li>
 <li class="swiper-slide"><a href="javascript:;">食品饮料</a></li>
 <li class="swiper-slide"><a href="javascript:;">电脑/办公</a></li>
 <li class="swiper-slide"><a href="javascript:;">家用日用</a></li>
 </ul>
 </div>
 </div>
 <div id="page" class="swiper-container" id="page">
 <div class="swiper-wrapper">
 <div class="swiper-slide slidepage">手机</div>
 <div class="swiper-slide slidepage">厨具</div>
 <div class="swiper-slide slidepage">数码</div>
 <div class="swiper-slide slidepage">家纺</div>
 <div class="swiper-slide slidepage">生鲜</div>
 <div class="swiper-slide slidepage">家用电器</div>
 <div class="swiper-slide slidepage">食品饮料</div>
 <div class="swiper-slide slidepage">电脑/办公</div>
 <div class="swiper-slide slidepage">家用日用</div>
 </div>
</div>

最后调用swiper

<script>
 var myNav = new Swiper('#nav', {
 spaceBetween: 10,
 slidesPerView : 3,
 watchSlidesProgress : true,
 watchSlidesVisibility : true,
 on:{
 tap: function(){
 myPage.slideTo( myNav.clickedIndex)
 }
 }
 })
 var myPage = new Swiper('#page',{
 on:{
 slideChangeTransitionStart: function(){
 updateNavPosition()
 }}
 })
 function updateNavPosition(){
 $('#nav .active-nav').removeClass('active-nav');
 var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
 if (!activeNav.hasClass('swiper-slide-visible')) {
 console.log(1);
 if (activeNav.index()>myNav.activeIndex) {
 console.log(2);
 var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
 myNav.slideTo(activeNav.index()-thumbsPerNav)
 }
 else {
 console.log(3);
 myNav.slideTo(activeNav.index())
 } 
 }
 }
</script>

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>商品分类</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 <link rel="stylesheet" href="css/swiper.min.css" >
 <script src="js/jquery-1.10.1.min.js"></script>
 <script src="js/swiper.min.js"></script>
 <style>
 *{padding:0;margin:0;font-size:20px;color:#333;}
 html{background:#fff;}
 a{text-decoration:none;}
 body{max-width:640px;margin:0 auto;position:relative;background:#ccc;overflow:hidden;}
 img{width:100%;border:0;}
 li{list-style:none;}

 .head-top{height:36px;position:fixed;top:0;left:0;text-align:center;width:100%;line-height:36px;}
 .swiper-containee{max-width:640px;}
 #nav{margin-top:36px;border-bottom:1px solid #999;padding:10px;}
 #nav li{text-align:center;}
 .active-nav{
 color:#fff;
 background:#ddd !important;
 }
 .active-nav a{
 color:#fff;
 background:#ddd !important;
 }
 #page .swiper-slide{height:6rem;}
 </style>
</head>
<body>
 <div id=header>
 <div class="head-top">
 <h3>商品分类</h3>
 </div>
 <div id="nav" class="swiper-container">
 <ul class="swiper-wrapper">
 <li class="swiper-slide"><a href="javascript:;" >手机</a></li>
 <li class="swiper-slide"><a href="javascript:;" >厨具</a></li>
 <li class="swiper-slide"><a href="javascript:;" >数码</a></li>
 <li class="swiper-slide"><a href="javascript:;" >家纺</a></li>
 <li class="swiper-slide"><a href="javascript:;" >生鲜</a></li>
 <li class="swiper-slide"><a href="javascript:;" >家用电器</a></li>
 <li class="swiper-slide"><a href="javascript:;" >食品饮料</a></li>
 <li class="swiper-slide"><a href="javascript:;" >电脑/办公</a></li>
 <li class="swiper-slide"><a href="javascript:;" >家用日用</a></li>
 </ul>
 </div>
 </div>
 <div id="page" class="swiper-container" id="page">
 <div class="swiper-wrapper">
 <div class="swiper-slide slidepage">手机</div>
 <div class="swiper-slide slidepage">厨具</div>
 <div class="swiper-slide slidepage">数码</div>
 <div class="swiper-slide slidepage">家纺</div>
 <div class="swiper-slide slidepage">生鲜</div>
 <div class="swiper-slide slidepage">家用电器</div>
 <div class="swiper-slide slidepage">食品饮料</div>
 <div class="swiper-slide slidepage">电脑/办公</div>
 <div class="swiper-slide slidepage">家用日用</div>
 </div>
 </div>
 <script>
 var myNav = new Swiper('#nav', {
 spaceBetween: 10,
 slidesPerView : 3,
 watchSlidesProgress : true,
 watchSlidesVisibility : true,
 on:{
 tap: function(){
 myPage.slideTo( myNav.clickedIndex)
 }
 }
 })
 var myPage = new Swiper('#page',{
 on:{
 slideChangeTransitionStart: function(){
 updateNavPosition()
 }}
 })
 function updateNavPosition(){
 $('#nav .active-nav').removeClass('active-nav');
 var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
 if (!activeNav.hasClass('swiper-slide-visible')) {
 console.log(1);
 if (activeNav.index()>myNav.activeIndex) {
 console.log(2);
 var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
 myNav.slideTo(activeNav.index()-thumbsPerNav)
 }
 else {
 console.log(3);
 myNav.slideTo(activeNav.index())
 } 
 }
 }
 </script>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • js仿京东轮播效果 选项卡套选项卡使用

    js仿京东轮播效果 选项卡套选项卡使用

    这篇文章主要为大家详细介绍了js仿京东轮播效果，选项卡里套选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 如何改进javascript代码的性能

    如何改进javascript代码的性能

    在web应用中，应用了大量的Javascript，因此代码的执行效率变得尤为重要，也就是性能！为了提高JS的性能，我们应该掌握一些基本的性能优化方式，并让它成为我们书写代码的习惯。下面介绍几种优化性能的方式，很多初学者甚至有经验的开发者也会忽略，希望对你有帮助
    2015-04-04
  • 一文带你搞懂面试率超高的JS事件循环

    一文带你搞懂面试率超高的JS事件循环

    事件循环是 JavaScript 中一个非常重要的概念，下面就来看看浏览器和 Node.js 中的事件循环的原理，以及两者之间的差异，感兴趣的可以了解一下
    2022-10-10
  • QT与javascript交互数据的实现

    QT与javascript交互数据的实现

    本文主要介绍了QT与javascript交互数据的实现，主要包括数据从QT流向JS以及数据从JS流向QT的几种方法，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 原生js canvas实现鼠标跟随效果

    原生js canvas实现鼠标跟随效果

    这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • AngularJs中Bootstrap3 datetimepicker使用实例

    AngularJs中Bootstrap3 datetimepicker使用实例

    这篇文章主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript制作游戏开发碰撞检测的封装代码

    javascript制作游戏开发碰撞检测的封装代码

    这篇文章主要介绍了javascript制作游戏开发碰撞检测的封装代码,需要的朋友可以参考下
    2015-03-03
  • 微信小程序实现简易计算器

    微信小程序实现简易计算器

    这篇文章主要为大家详细介绍了微信小程序实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • javascript跳转与返回和刷新页面的实例代码

    javascript跳转与返回和刷新页面的实例代码

    这篇文章主要介绍了javascript跳转与返回和刷新页面的实例代码，简单介绍了javascript中window.open()与window.location.href的区别，感兴趣的朋友一起看看吧
    2019-11-11
  • JavaScript展开运算符和剩余运算符的区别详解

    JavaScript展开运算符和剩余运算符的区别详解

    本文主要介绍了JavaScript展开运算符和剩余运算符的区别详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论