首页

科技资讯

技术分享

程序开发

设备维修

登录

注册

• 首页
• 程序开发
• 正文

利用swiper怎么实现一个导航滚动效果

创始人

2024-12-18 22:42:30

0次

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

  
   
   
推荐
   
Recommend
   
   
   
英语培训 
   
English training
   
   
   
早教 
   
Early education
   
   
   
设计培训 
   
Design training
   
   
   
舞蹈培训 
   
Dance training
   
   
   
艺考  
   
Art Examination
   
  
  

             

                    

    高考复读培训班

         济南大智学校        

                    

    高考复读培训班

         济南大智学校        

                    

    高考复读培训班

         济南大智学校        

                    

    高考复读培训班

         济南大智学校                

                    

    高考复读培训高考复读培训班

         济南大智学校        

                    

    高考复读培训班

         济南大智学校        

                    

    高考复读培训班

         济南大智学校        

                    

    高考复读培训班

         济南大智学校           

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.需求：滑动这块，导航选中的元素随着变化

   培训汇
   
最新知识
   
品牌专题
  
  
   
   
    
    
     英语口语小技巧分享
     2020年09月27日

    
    
     
    
    
    
    
     英语口语小技巧分享
     2020年09月27日

    
    
     
    
    
   
   
    
    
     英语口语小技巧分享
     2020年09月27日

    
    
     
    
    
    
    
     英语口语小技巧分享
     2020年09月27日

    
    
     
    
    
    
    
     英语口语小技巧分享
     2020年09月27日

    
    
     
    
    
   
   
    
    
     英语口语小技巧分享
     2020年09月27日

    
    
     
    
    
    
    
     高考英语语法填空题得分技巧
     2020年09月27日

    
    
     
    
    
   
       
   

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