swiper实现导航滚动效果

程序员文章站 2022-03-15 20:21:03

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

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

swiper实现导航滚动效果

js实现导航栏中英文切换效果

js实现带缓动动画的导航栏效果

iOS实现卡片式滚动效果 iOS实现电影选片效果

fullPage.js和CSS3实现全屏滚动效果

Javascript实现页面滚动时导航智能定位

Unity3D实现导航效果

Android 使用CoordinatorLayout实现滚动标题栏效果的实例

Android Support Library 标题栏(Toolbar)滚动效果实现方法

Android实现两个ScrollView互相联动的同步滚动效果代码

vue.js2.0 实现better-scroll的滚动效果实例详解