本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下

首先导入

链接rel='样式表href=' CSS/swiper。量滴CSS ' script src=' http : js/jquery-1。10 .1 .量滴js '/script script src=' http : js/swiper。量滴js '/脚本(这里用的是Swiper 4.0.7版本)在写入超文本标记语言内容

H3商品分类/H3/div id=' nav ' class=' swiper-container ' ul class=' swiper-wrapper ' Li class=' swiper-slide active-nav ' a href=' JavaScript :'手机/a/Li Li class=' swiper-slide ' a href=' JavaScript :'厨具/a/Li Li class=' swiper-slide ' a href=' JavaScript :'数码/a/Li Li class=' swiper-slide ' a href=' JavaScript :'家纺/a/Li Li class=' swiper-slide ' a href=' JavaScript :'生鲜/a/Li Li class=' swiper-slide ' a href=' JavaScript :'家用电器/a/Li Li class=' swiper-slide ' a href=' JavaScript :'食品饮料/a/Li Li class=' swiper-slide ' a href=' JavaScript :'电脑/办公/a/Li Li class=' swiper-slide ' a href=' JavaScript :'家用日用/a/Li/ul/div/div id=' page ' class=' swiper-container ' id=' page ' div class=' swiper-wrapper ' div class=' swiper-slide page '手机/div div class=' swiper-slide page幻灯片'厨具/div div class=' swiper-slide page幻灯片'数码/div div class=' swiper-slide page幻灯片'家纺/div div class=' swiper-slide page幻灯片'生鲜/div div class=' swiper-slide page幻灯片'家用电器/div div class=' swiper-slide page幻灯片'食品饮料/div div class=' swiper-slide page幻灯片'电脑/办公/div div class=' swiper-slide page幻灯片'家用日用/div /div/div最后调用捣蛋鬼

脚本var myNav=new Swiper('#nav '，{ spaceBetween: 10，slidesPerView : 3，watchSlidesProgress : true，watchslidersvisibility : true， { tap : function(){ myPage。我的导航。clickedindex)} } })var my page=new Swiper(' # page '，{ : { sliderchangetrans start : function(){ updatenavtposition }活动导航')。移除CLaSS(' active-nav ')；var activeNav=$('#nav .swiper-slide ').eq(myPage.activeIndex).添加CLaSS(' active-nav ')；if(！活动NaV。has class(' swiper-slide-visible '){ console。日志(1)；if(activenav。索引()。我的导航。activeindex){控制台。日志(2)；var thumbspenav=数学。楼层(我的导航。宽度/活动导航。width())-1我的导航。滑动到(活动导航。index()-thumbs penav)} else { console。日志(3)；我的导航。滑动到(活动导航。index())} } }/script全部代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题商品分类/title meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1，user-scale=no '/link rel='样式表href=' CSS/swiper。量滴CSS ' script src=' http : js/jquery-1。10 .1 .量滴js '/script script src=' http : js/swiper。量滴js '/脚本样式* { padd 33600margin :0 font-size :20 px；color : # 333 } html { background : # fff } a { text-decoration : none；}车身{最大宽度宽度：640pxmargin:0自动位置：相对；背景# ccc飞越：隐藏；} img { width :100%；border:0} Li {列表式：无；} .头顶高：36像素位置：固定；top:0left:0文本对齐：居中；宽度：100%;线高：36 px} .swiper-containee {最大宽度：640 px} # nav { margin-top :36 px；边框-底部：1px实心# 999;padd :10 px } # nav Li { text-align : center；} .active-nav { color : # fff；背景：#ddd！重要；} .active-nav a { color : # fff；背景：#ddd！重要；} #页面swiper-slide { height :6 rem；}/style/head body div id=head div class=' head-top ' H3商品分类/H3/div div id=' nav ' class=' swiper-container ' ul class=' swiper-wrapper ' Li class=' swiper-slide ' a href=' JavaScript :'手机/a/Li Li class=' swiper-slide ' a href=' JavaScript :'厨具/a/Li Li class=' swiper-slide ' a href=' JavaScript :'数码/a/Li Li class=' swiper-slide ' a href=' JavaScript :'家纺/a/Li Li class=' swiper-slide ' a href=' JavaScript :'生鲜/a/Li Li class=' swiper-slide ' a href=' JavaScript :'家用电器/a/Li Li class=' swiper-slide ' a href=' JavaScript :'食品饮料/a/Li Li class=' swiper-slide ' a href=' JavaScript :'电脑/办公/a/Li Li class=' swiper-slide ' a href=' JavaScript :'家用日用/a/Li/ul/div/div id=' page ' class=' swiper-container ' id=' page ' div class=' swiper-wrapper ' div class=' swiper-slide page '手机/div div class=' swiper-slide page幻灯片'厨具/div div class=' swiper-slide page幻灯片'数码/div div class=' swiper-slide page幻灯片'家纺/div div class=' swiper-slide page幻灯片'生鲜/div div class=' swiper-slide page幻灯片'家用电器/div div class=' swiper-slide page幻灯片'食品饮料/div div class=' swiper-slide page幻灯片'电脑/办公/div div class=' swiper-slide page幻灯片'家用日用/div /div /div脚本var myNav=new Swiper('#nav '，{ spaceBetween: 10，slidesPerView : 3，watchSlidesProgress : true，watchslidersvisibility : true， { tap : function(){ myPage。slideto(我的导航。单击edindex)} })var my page=new Swiper(' # page '，{ : { slide changetrantionstart :活动导航')。移除CLaSS(' active-nav ')；var activeNav=$('#nav .swiper-slide ').eq(myPage.activeIndex).添加CLaSS(' active-nav ')；if(！活动NaV。has class(' swiper-slide-visible '){ console。日志(1)；if(activenav。索引()。我的导航。activeindex){控制台。日志(2)；var thumbspenav=数学。楼层(我的导航。宽度/活动导航。width())-1我的导航。滑动到(活动导航。index()-thumbs penav)} else { console。日志(3)；我的导航。滑动到(activenav。index())} } }/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。