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 import css实例代码
Jul 18 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
PHP开发文件系统实例讲解
2006/10/09 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
python 如何引入协程和原理分析
2020/11/30 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
租房安全协议书
2014/08/20 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
奖励申请报告范文
2015/05/15 职场文书
小学思品教学反思
2016/02/20 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
十个Python自动化常用操作,即拿即用
2021/05/10 Python
利用js实现简单开关灯代码
2021/11/23 Javascript
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL