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 相关文章推荐
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 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 程序员也要学会使用“异常”
2009/06/16 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Django的分页器实例(paginator)
2017/12/01 Python
python绘制简单折线图代码示例
2017/12/19 Python
python实现聊天小程序
2018/03/13 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
tensorflow 环境变量设置方式
2020/02/06 Python
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
南阳市白酒市场的调查报告
2019/11/08 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Python find()、rfind()方法及作用
2022/12/24 Python