首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

swiper实现导航滚动效果

Posted in Javascript onDecember 13, 2020

本文实例为大家分享了swiper实现导航滚动效果的具体代码，供大家参考，具体内容如下

1.需求：点击导航科目，选中元素自动往前滑动处于中间位置，tab切换

swiper实现导航滚动效果

<div class="swiper-container city-column-course">
  <ul class="swiper-wrapper">
   <li class="swiper-slide on">
   <h4>推荐</h4>
   <p>Recommend</p>
   </li>
   <li class="swiper-slide">
   <h4>英语培训 </h4>
   <p>English training</p>
   </li>
   <li class="swiper-slide">
   <h4>早教 </h4>
   <p>Early education</p>
   </li>
   <li class="swiper-slide">
   <h4>设计培训 </h4>
   <p>Design training</p>
   </li>
   <li class="swiper-slide">
   <h4>舞蹈培训 </h4>
   <p>Dance training</p>
   </li>
   <li class="swiper-slide">
   <h4>艺考  </h4>
   <p>Art Examination</p>
   </li>
  </ul>
  </div>
  <div class="swiper-container city-course-list">
  <div class="tab-box swiper-wrapper">
   <ul class="index-column-course clearfix swiper-slide">
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   </ul>
   <ul class="index-column-course clearfix swiper-slide">
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考复读培训班</p>
    </a>
    <a href="#" class="course-item-jg">济南大智学校</a>
   </li>
   </ul>
  </div>
</div>

js：

var mySwiper = new Swiper('.city-column-course', {
   freeMode: true,
   freeModeMomentumRatio: 0.5,
   slidesPerView: 'auto',
 
 });
 //滑动列表，导航滑动到相应科目并居中显示
 var cityList = new Swiper('.city-course-list',{
 slidesPerView : 1,
 onSlideChangeEnd: function(swiper){
  var num=swiper.activeIndex;
  $(".city-column-course").find("li").eq(num).addClass("on").siblings("li").removeClass("on");
  slide = mySwiper.slides[num];
  slideLeft = slide.offsetLeft;
  slideWidth = slide.clientWidth;
  slideCenter = slideLeft + slideWidth / 2;
  // 被点击slide的中心点
  mySwiper.setWrapperTransition(300);
  
  if (slideCenter < swiperWidth / 2) {
  
    mySwiper.setWrapperTranslate(0);
  
  } else if (slideCenter > maxWidth) {
  
    mySwiper.setWrapperTranslate(maxTranslate);
  
  } else {
  
    nowTlanslate = slideCenter - swiperWidth / 2;
  
    mySwiper.setWrapperTranslate(-nowTlanslate);
  
  }
 }
 })
 swiperWidth = mySwiper.container[0].clientWidth;
 maxTranslate = mySwiper.maxTranslate();
 maxWidth = -maxTranslate + swiperWidth / 2;
 $(".city-column-course").on('touchstart', function (e) {
   e.preventDefault();
 });
 //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 mySwiper.on('tap', function (swiper, e) {
   // e.preventDefault()
   slide = swiper.slides[swiper.clickedIndex];
   slideLeft = slide.offsetLeft;
   slideWidth = slide.clientWidth;
   slideCenter = slideLeft + slideWidth / 2;
   // 被点击slide的中心点
   mySwiper.setWrapperTransition(300);
 
   if (slideCenter < swiperWidth / 2) {
 
     mySwiper.setWrapperTranslate(0);
 
   } else if (slideCenter > maxWidth) {
 
     mySwiper.setWrapperTranslate(maxTranslate);
 
   } else {
 
     nowTlanslate = slideCenter - swiperWidth / 2;
 
     mySwiper.setWrapperTranslate(-nowTlanslate);
 
   }
   $(".city-column-course .on").removeClass('on');
   $(".city-column-course .swiper-slide").eq(swiper.clickedIndex).addClass('on');
 cityList.slideTo(swiper.clickedIndex, 500, false);//切换到第一个slide


});

2.需求：滑动这块，导航选中的元素随着变化

swiper实现导航滚动效果

<ul class="index-column-edu-nav clearfix">
   <li class="on"><a href="javascript:;" >培训汇</a></li>
   <li><a href="javascript:;" >最新知识</a></li>
   <li><a href="javascript:;" >品牌专题</a></li>
  </ul>
  <div class="swiper-container index-edu-swiper">
   <div class="tab-box swiper-wrapper">
   <dl class="index-column-xun swiper-slide">
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英语口语小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英语口语小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
   </dl>
   <dl class="swiper-slide index-column-xun">
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英语口语小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英语口语小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英语口语小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
   </dl>
   <dl class="swiper-slide index-column-xun">
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英语口语小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">高考英语语法填空题得分技巧</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
   </dl>
       
   </div>
</div>

js：

//js
var indexEdu = new Swiper('.index-edu-swiper',{
 slidesPerView : 1,
 onSlideChangeEnd: function(swiper){
  var num=swiper.activeIndex;
  $(".index-column-edu-nav").find("li").eq(num).addClass("on").siblings("li").removeClass("on");
 }
 })
 $(document).on("click",".index-column-edu-nav li",function(){
 $(this).addClass("on").siblings("li").removeClass("on");
 var num=$(this).index();
 indexEdu.slideTo(num, 500, false);//切换到第n个slide，速度为1秒
 })

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

swiper实现导航滚动效果

- Author -

mySunshine921

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
swiperjs实现导航与tab页的联动
Dec 13 #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
mt-swipe(1) 相对路径(1) requests(1) hmac(1) 面向对象(3) openpyxl(1) Mint UI(1) 相对路径 (1) hashlib(1) 慢日志(1)
You might like
PHPThumb图片处理实例
2014/05/03 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[03:05]《我与DAC》之xiao8：DAC与BG
2018/03/27 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python向excel中写入数据的方法
2019/05/05 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
详解Python3 pickle模块用法
2019/09/16 Python
python tkinter图形界面代码统计工具（更新）
2019/09/18 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
求∏的近似值，直到最后一项的绝对值小于指定的数
2016/02/12 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
先进个人获奖感言
2014/01/24 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis