swiper实现导航滚动效果
程序员文章站
2022-06-23 14:25:07
本文实例为大家分享了swiper实现导航滚动效果的具体代码,供大家参考,具体内容如下1.需求:点击导航科目,选中元素自动往前滑动处于中间位置,tab切换
本文实例为大家分享了swiper实现导航滚动效果的具体代码,供大家参考,具体内容如下
1.需求:点击导航科目,选中元素自动往前滑动处于中间位置,tab切换
<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.需求:滑动这块,导航选中的元素随着变化
<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秒 })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。