DDR爱好者之家

swiper4实现移动端导航切换
站长资源 2024/11/25 佚名
16 1538
DDR爱好者之家 Design By 杰米

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

swiper4实现移动端导航切换

首先导入

swiper4实现移动端导航切换

<link rel="stylesheet" href="css/swiper.min.css" >
<script src="/UploadFiles/2021-04-02/jquery-1.10.1.min.js">


在写入html内容





<div id=header>
 <div class="head-top">
 <h3>商品分类</h3>
 </div>
 <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>
 <div id="page" 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>
</div>





最后调用swiper





<script>
 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())
 } 
 }
 }
</script>





全部代码如下：





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>商品分类</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 <link rel="stylesheet" href="css/swiper.min.css" >
 <script src="/UploadFiles/2021-04-02/jquery-1.10.1.min.js">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米