swiper4实现移动端导航切换


Posted in Javascript onOctober 16, 2020

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

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>

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

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 #Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 #Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 #Javascript
javascript的惯性运动实现代码实例
Sep 07 #Javascript
You might like
第九节--绑定
2006/11/16 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
python学习之编写查询ip程序
2016/02/27 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
数控机床专业自荐信
2014/05/19 职场文书
技术负责人任命书
2014/06/05 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
检讨书格式范文
2015/05/07 职场文书
千与千寻观后感
2015/06/04 职场文书
获奖感言怎么写
2015/07/31 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript