本文實例為大家分享了swiper4實現移動端導航切換的具體代碼，供大家參考，具體內容如下

首先導入

(這里用的是Swiper 4.0.7版本)

在寫入html內容

商品分類

• 手機
• 廚具
• 數碼
• 家紡
• 生鮮
• 家用電器
• 食品飲料
• 電腦/辦公
• 家用日用

手機廚具數碼家紡生鮮家用電器食品飲料電腦/辦公家用日用

最后調用swiper

var myNav = new Swiper('#nav', {

spaceBetween: 10,

slidesPerView : 3,

watchSlidesProgress : true,

watchSlidesVisibility : true,

on:{

tap: function(){

myPage.slideTo( myNav.clickedIndex)

}

}

})

var myPage = new Swiper('#page',{

on:{

slideChangeTransitionStart: function(){

updateNavPosition()

}}

})

function updateNavPosition(){

$('#nav .active-nav').removeClass('active-nav');

var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');

if (!activeNav.hasClass('swiper-slide-visible')) {

console.log(1);

if (activeNav.index()>myNav.activeIndex) {

console.log(2);

var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1

myNav.slideTo(activeNav.index()-thumbsPerNav)

}

else {

console.log(3);

myNav.slideTo(activeNav.index())

}

}

}

全部代碼如下：

商品分類

*{padding:0;margin:0;font-size:20px;color:#333;}

html{background:#fff;}

a{text-decoration:none;}

body{max-width:640px;margin:0 auto;position:relative;background:#ccc;overflow:hidden;}

img{width:100%;border:0;}

li{list-style:none;}

.head-top{height:36px;position:fixed;top:0;left:0;text-align:center;width:100%;line-height:36px;}

.swiper-containee{max-width:640px;}

#nav{margin-top:36px;border-bottom:1px solid #999;padding:10px;}

#nav li{text-align:center;}

.active-nav{

color:#fff;

background:#ddd !important;

}

.active-nav a{

color:#fff;

background:#ddd !important;

}

#page .swiper-slide{height:6rem;}

商品分類

• 手機
• 廚具
• 數碼
• 家紡
• 生鮮
• 家用電器
• 食品飲料
• 電腦/辦公
• 家用日用

手機廚具數碼家紡生鮮家用電器食品飲料電腦/辦公家用日用

var myNav = new Swiper('#nav', {

spaceBetween: 10,

slidesPerView : 3,

watchSlidesProgress : true,

watchSlidesVisibility : true,

on:{

tap: function(){

myPage.slideTo( myNav.clickedIndex)

}

}

})

var myPage = new Swiper('#page',{

on:{

slideChangeTransitionStart: function(){

updateNavPosition()

}}

})

function updateNavPosition(){

$('#nav .active-nav').removeClass('active-nav');

var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');

if (!activeNav.hasClass('swiper-slide-visible')) {

console.log(1);

if (activeNav.index()>myNav.activeIndex) {

console.log(2);

var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1

myNav.slideTo(activeNav.index()-thumbsPerNav)

}

else {

console.log(3);

myNav.slideTo(activeNav.index())

}

}

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的移动端导航页面html,swiper4实现移动端导航切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。