欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

swiper实现导航滚动效果

程序员文章站 2022-06-23 14:25:07
本文实例为大家分享了swiper实现导航滚动效果的具体代码,供大家参考,具体内容如下1.需求:点击导航科目,选中元素自动往前滑动处于中间位置,tab切换

本文实例为大家分享了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秒
 })

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