移动端导航页面html,swiper4实现移动端导航切换

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

}

}

}

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