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秒
 })

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

Javascript 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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
You might like
pw的一个放后门的方法分析
2007/10/08 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
Js动态创建div
2008/09/25 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
Express.JS使用详解
2014/07/17 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python实现多线程网页下载器
2018/04/15 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
C语言笔试题
2014/09/04 面试题
校园文化建设方案
2014/02/03 职场文书
五一劳动节活动记录
2014/03/23 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
先进事迹材料范文
2014/12/29 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Mysql binlog日志文件过大的解决
2021/10/05 MySQL