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 相关文章推荐
用js来解决ajax读取页面乱码
Nov 28 Javascript
Angular的$http与$location
Dec 26 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
js实现select下拉框选择
Jan 11 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 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python复制文件的方法实例详解
2015/05/22 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
pygame实现飞机大战
2020/03/11 Python
python开根号实例讲解
2020/08/30 Python
python 线程的五个状态
2020/09/22 Python
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
基层工作经验证明样本
2014/11/16 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
基于Python实现一个春节倒计时脚本
2022/01/22 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL