使用swiper4怎么實(shí)現(xiàn)一個(gè)移動(dòng)端導(dǎo)航切換功能-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用swiper4怎么實(shí)現(xiàn)一個(gè)移動(dòng)端導(dǎo)航切換功能，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、莆田網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

首先導(dǎo)入

使用swiper4怎么實(shí)現(xiàn)一個(gè)移動(dòng)端導(dǎo)航切換功能

<link rel="stylesheet" href="css/swiper.min.css" >
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>(這里用的是Swiper 4.0.7版本)

在寫(xiě)入html內(nèi)容

<div id=header>
 <div class="head-top">
 <h4>商品分類(lèi)</h4>
 </div>
 <div id="nav" class="swiper-container">
 <ul class="swiper-wrapper">
 <li class="swiper-slide active-nav"><a href="javascript:;" >手機(jī)</a></li>
 <li class="swiper-slide"><a href="javascript:;">廚具</a></li>
 <li class="swiper-slide"><a href="javascript:;">數(shù)碼</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">手機(jī)</div>
 <div class="swiper-slide slidepage">廚具</div>
 <div class="swiper-slide slidepage">數(shù)碼</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>

最后調(diào)用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>商品分類(lèi)</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="js/jquery-1.10.1.min.js"></script>
 <script src="js/swiper.min.js"></script>
 <style>
 *{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;}
 </style>
</head>
<body>
 <div id=header>
 <div class="head-top">
 <h4>商品分類(lèi)</h4>
 </div>
 <div id="nav" class="swiper-container">
 <ul class="swiper-wrapper">
 <li class="swiper-slide"><a href="javascript:;" >手機(jī)</a></li>
 <li class="swiper-slide"><a href="javascript:;" >廚具</a></li>
 <li class="swiper-slide"><a href="javascript:;" >數(shù)碼</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">手機(jī)</div>
 <div class="swiper-slide slidepage">廚具</div>
 <div class="swiper-slide slidepage">數(shù)碼</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>
 <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>
</body>
</html>

上述就是小編為大家分享的使用swiper4怎么實(shí)現(xiàn)一個(gè)移動(dòng)端導(dǎo)航切換功能了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：使用swiper4怎么實(shí)現(xiàn)一個(gè)移動(dòng)端導(dǎo)航切換功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)鏈接：http://www.rwnh.cn/article8/csseop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站收錄、App開(kāi)發(fā)、響應(yīng)式網(wǎng)站、Google、網(wǎng)站導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

使用swiper4怎么實(shí)現(xiàn)一個(gè)移動(dòng)端導(dǎo)航切換功能-創(chuàng)新互聯(lián)