swiper实现移动端导航和内容板块的联动

第一部分：HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/swiper.min.css"><script src="js/jquery.min.js"></script><script src="js/swiper.min.js"></script><title>Document</title><script>var bw = (document.documentElement.clientWidth / 7.5) + "px";var htmlTag = document.getElementsByTagName("html")[0];htmlTag.style.fontSize = bw;</script>
</head><body><div id="top"><div class="swiper-container nav" id="nav"><div class="swiper-wrapper"><div style="font-weight: bold;" class="swiper-slide nav-a"><span style="color: #fff;">宝马</span></div><div class="swiper-slide nav-a"><span>奔驰</span></div><div class="swiper-slide nav-a"><span>捷豹</span></div><div class="swiper-slide nav-a"><span>保时捷</span></div><div class="swiper-slide nav-a"><span>路虎</span></div><div class="swiper-slide nav-a"><span>大众</span></div><div class="swiper-slide nav-a"><span>丰田</span></div><div class="swiper-slide nav-a"><span>本田</span></div><div class="swiper-slide nav-a"><span>奥迪</span></div><div class="swiper-slide nav-a"><span>沃尔沃</span></div><div class="bar"><div class="color"></div></div></div></div></div><div class="swiper-container" id="page"><div class="swiper-wrapper"><div class="swiper-slide slidepage"> 宝马 </div><div class="swiper-slide slidepage"> 奔驰 </div><div class="swiper-slide slidepage"> 捷豹 </div><div class="swiper-slide slidepage"> 保时捷 </div><div class="swiper-slide slidepage"> 路虎 </div><div class="swiper-slide slidepage"> 大众 </div><div class="swiper-slide slidepage"> 丰田 </div><div class="swiper-slide slidepage"> 本田 </div><div class="swiper-slide slidepage"> 奥迪 </div><div class="swiper-slide slidepage"> 沃尔沃 </div></div></div>
</body>
</html>

第二部分：CSS

body,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img,
legend,
li,
ol,
p,
ul {margin: 0;padding: 0
}fieldset,
img {border: none
}address,
caption,
cite,
code,
dfn,
th,
var {font-style: normal;font-weight: 400
}ol,
ul {list-style: none
}input,
select {vertical-align: middle
}input,
select,
textarea {font-size: 12px;margin: 0
}table {border-collapse: collapse
}
html,body{height: 100%;
}
.mescroll {width: 100%;height: 100%;margin: 0 auto;overflow-y: scroll;padding-top: .03rem;
}
#top {position: fixed;top: 0;z-index: 5;width: 100%;background: #fff;
}
#nav .bar .color{width: .2rem;margin: 0 auto;height: 1px;background: #FFFFFF;}#nav .bar {width: .5rem;height: .03rem;position: absolute;bottom: .12rem;
}
.nav-a span{line-height: .55rem;
}
#page {height:100%;padding-top: .58rem;}
#page .slidepage {height:100%;
}.nav{position: relative;background-color: #4396f7;height: .56rem;
}
.nav-list{overflow: hidden;overflow-x: scroll;white-space: nowrap;display: flex;height: .56rem;align-items: center;
}
.nav-a {color: rgba(255,255,255,.7);text-decoration: none;font-size: .16rem;margin:  0px;line-height: .28rem;display: inline-block;height: 100%;overflow: hidden;position: relative;text-align: center;
}

第三部分：JS

//暂时设计每个slide大小需要一致barwidth = 36 //导航条的长度pxtSpeed = 100 //切换速度300msvar navSwiper = new Swiper('#nav', {slidesPerView: 6,freeMode: true,on: {init: function () {navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致bar = this.$el.find('.bar')bar.css('width', navSlideWidth)bar.transition(tSpeed)navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度navWidth = 0for (i = 0; i < this.slides.length; i++) {navWidth += parseInt(this.slides.eq(i).css('width'))}topBar = this.$el.parents('body').find('#top') //页头},},});var pageSwiper = new Swiper('#page', {watchSlidesProgress: true,resistanceRatio: 0,on: {touchMove: function () {progress = this.progressbar.transition(0)bar.transform('translateX(' + navSum * progress + 'px)')},transitionStart: function () {activeIndex = this.activeIndexactiveSlidePosition = navSwiper.slides[activeIndex].offsetLeft//释放时导航粉色条移动过渡bar.transition(tSpeed)bar.transform('translateX(' + activeSlidePosition + 'px)')//释放时文字变色过渡navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)navSwiper.slides.eq(activeIndex).find('span').css('color', '#fff')navSwiper.slides.eq(activeIndex).css('font-weight', 'bold')if (activeIndex > 0) {navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(255,255,255,.7)')navSwiper.slides.eq(activeIndex - 1).css('font-weight', 'inherit')}if (activeIndex < this.slides.length) {navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(255,255,255,.7)')navSwiper.slides.eq(activeIndex + 1).css('font-weight', 'inherit')}//导航居中navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离navSwiper.setTransition(tSpeed)if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {navSwiper.setTranslate(0)} else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {navSwiper.setTranslate(clientWidth - navWidth)} else {navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)}},}});navSwiper.on('tap', function (e) {clickIndex = this.clickedIndexclickSlide = this.slides.eq(clickIndex)pageSwiper.slideTo(clickIndex, 0);this.slides.find('span').css('color', 'rgba(255,255,255,.7)');clickSlide.find('span').css('color', '#fff');})

swiper.min.js(代码太长)和swiper.min.css可以自行下载 Swiper 4.0.7
注:若下载的swiper.min.js不能用请移步到:https://www.cnblogs.com/520yh/p/14120585.html

swiper实现移动端导航和内容板块的联动相关推荐

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件
为什么80%的码农都做不了架构师?>>> Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件 http://www.swiper.com ...
移动端导航页面html,swiper4实现移动端导航切换
本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下首先导入 (这里用的是Swiper 4.0.7版本) 在写入html内容商品分类手机厨具数码家纺生 ...
html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换
swiper4移动端导航栏tab滑动切换效果,供大家参考,具体内容如下效果如图: 首先引入swiper的css和js文件官网下载地址 html结构部分 slider1 slider2 slider ...
swiper4移动端导航栏tab滑动切换
swiper4移动端导航栏tab滑动切换效果效果如图: 首先引入swiper的css和js文件官网下载地址 <link href="swiper.min.css" rel ...
PC端与虚拟机内容拷贝
PC端与虚拟机内容拷贝在安装Ubuntu系统后发现与Windows系统的文件不能相互复制,网上查了很多教程,发现都是不能用的,能实现的方法如下所示: 第一步: sudo apt-get autore ...
使用ros2d.js实现web端导航
使用ros2d.js实现web端导航前端资源下载: ros2d地图显示导航校准-机器学习文档类资源-CSDN下载
什么是抖音飞鸽“智能助手”，飞鸽智能助手内容板块介绍
抖音飞鸽系统推出"智能助手",智能助手是用户进线咨询或者客服主动发起会话时,更准确的说是飞鸽系统预测.消费者咨询中客服需要参考和知晓的信息,通过快速获取这些信息,来帮助客服快速定位 ...
导航电子地图内容一览图
导航电子地图内容一览图
PC端 -- 导航活动跳转 -- 锚点动画跳转
目录一.PC端 -- 导航活动跳转 -- 锚点动画跳转 ① 初始化 ② 绑定方法 ③ 具体事件 ④ 导航活动跳转 ⑤ 兼容移动与pc部分不支持 $("html").animate ...
Swiper移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...

swiper实现移动端导航和内容板块的联动

swiper实现移动端导航和内容板块的联动相关推荐

最新文章

热门文章