swiperjs实现导航与tab页的联动


Posted in Javascript onDecember 13, 2020

本文实例为大家分享了swiperjs实现导航与tab页的联动,供大家参考,具体内容如下

这里主要实现了以下功能:

1.点击导航栏切换tab
2.tab页高度自适应不会影响布局
3.导航栏的拖动
4.tab页的滑动与导航栏联动

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  html,body{
   width: 100%;
  }
  .mains{
   width: 350px;
   height: 500px;
   background: skyblue;
   margin: 0 auto;
  }
  .tab,ul{
   width: 350px;
   height: 30px;
  }
  li{
   height: 30px;
   margin-right: 5px;
  }
  .swiper-bg{
   background: gray;
  }
 </style>
 <link rel="stylesheet" href="./public/swiper.min.css" >
</head>
<body>
  <div class="mains">
    <div class="tab swiper-container">
     <ul class="rank_ul swiper-wrapper">
      <li style="background: #de5055;color:#fff;border-color: #de5055;" class="swiper-slide">女包女鞋榜</li>
      <li class="swiper-slide">家居榜</li>
      <li class="swiper-slide">化?y品榜</li>
      <li class="swiper-slide">女装榜</li>
      <li class="swiper-slide">男装榜</li>
     </ul>
    </div>
    <div class="swiper-container swiper-container8 swiper-bg">
     <div class="swiper-wrapper">
     <div class="swiper-slide">
       女包女鞋榜
       <p>sada</p>
       <p>sada</p>
       <p>sada</p>
       <p>sada</p>
     </div>
     <div class="swiper-slide">
       家居榜
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
     </div>
     <div class="swiper-slide">
       化?y品榜
     </div>
     <div class="swiper-slide">
       女装榜
     </div>
     <div class="swiper-slide">
       男装榜
     </div>
     </div>
     </div>
    </div>
    </div>
 <script src="./public/jquery.min.js"></script>
 <script src="./public/swiper.min.js"></script>
 <script>
  var swiper = new Swiper(".swiper-container8",{
   on:{
    slideChange: function(){
     $(".rank_ul li").css("background","none");
     $(".rank_ul li").css("color","black");
     $(".rank_ul li").css("border-color","#e0e0e0");
     $(".swiper-container8").css("height","auto")
     $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(this.activeIndex).height())
     $(".rank_ul li").eq(this.activeIndex).css("background","#de5055");
     $(".rank_ul li").eq(this.activeIndex).css("border-color","#de5055");

     $(".rank_ul li").eq(this.activeIndex).css("color","#fff");
    },
   }
  });
  var tab = new Swiper(".tab",{
   slidesPerView : 3.5,
   watchSlidesProgress : true,
   watchSlidesVisibility : true,
  });
  var ul = document.getElementsByClassName("rank_ul")[0];
  var lis = ul.children;
  $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(0).height())
  for(var i = 0;i < lis.length;i++){
   var li = lis[i];
   li.index = i;
   li.onclick = function(){
   $(".rank_ul li").css("background","none");
   $(".rank_ul li").css("color","black");
   $(".rank_ul li").css("border-color","#e0e0e0");
   $(this).css("background","#de5055");
   $(this).css("color","#fff");
   $(this).css("border-color","#de5055");
   $(".swiper-container8").css("height","auto")
   $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(this.index).height())
   swiper.slideTo(this.index);
   } 
  }
 </script>
</body>
</html>

效果图:

swiperjs实现导航与tab页的联动

swiperjs实现导航与tab页的联动

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

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
Vue实现简单购物车功能
Dec 13 #Vue.js
javascript前端实现多视频上传
Dec 13 #Javascript
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
js实现滚动条自动滚动
Dec 13 #Javascript
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
You might like
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python3调用R的示例代码
2018/02/23 Python
详解python中递归函数
2019/04/16 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
详解pandas映射与数据转换
2021/01/22 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
Jar包的作用是什么
2014/03/30 面试题
linux面试题参考答案(10)
2013/11/04 面试题
店长岗位的工作内容
2013/11/12 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
交通安全横幅标语
2014/10/07 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server