利用swiper怎么實(shí)現(xiàn)一個(gè)導(dǎo)航滾動(dòng)效果-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)利用swiper怎么實(shí)現(xiàn)一個(gè)導(dǎo)航滾動(dòng)效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、木壘哈薩克網(wǎng)站維護(hù)、網(wǎng)站推廣。

1.需求：點(diǎn)擊導(dǎo)航科目，選中元素自動(dòng)往前滑動(dòng)處于中間位置，tab切換

<div class="swiper-container city-column-course">
  <ul class="swiper-wrapper">
   <li class="swiper-slide on">
   <h5>推薦</h5>
   <p>Recommend</p>
   </li>
   <li class="swiper-slide">
   <h5>英語(yǔ)培訓(xùn) </h5>
   <p>English training</p>
   </li>
   <li class="swiper-slide">
   <h5>早教 </h5>
   <p>Early education</p>
   </li>
   <li class="swiper-slide">
   <h5>設(shè)計(jì)培訓(xùn) </h5>
   <p>Design training</p>
   </li>
   <li class="swiper-slide">
   <h5>舞蹈培訓(xùn) </h5>
   <p>Dance training</p>
   </li>
   <li class="swiper-slide">
   <h5>藝考  </h5>
   <p>Art Examination</p>
   </li>
  </ul>
  </div>
  <div class="swiper-container city-course-list">
  <div class="tab-box swiper-wrapper">
   <ul class="index-column-course clearfix swiper-slide">
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   </ul>
   <ul class="index-column-course clearfix swiper-slide">
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   <li>
    <a href="#" >
    <div class="course-item-logo">
     <img src="images/12120_621da.jpg" alt="">
    </div>
    <p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
    </a>
    <a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
   </li>
   </ul>
  </div>
</div>

js：

var mySwiper = new Swiper('.city-column-course', {
   freeMode: true,
   freeModeMomentumRatio: 0.5,
   slidesPerView: 'auto',
 
 });
 //滑動(dòng)列表，導(dǎo)航滑動(dòng)到相應(yīng)科目并居中顯示
 var cityList = new Swiper('.city-course-list',{
 slidesPerView : 1,
 onSlideChangeEnd: function(swiper){
  var num=swiper.activeIndex;
  $(".city-column-course").find("li").eq(num).addClass("on").siblings("li").removeClass("on");
  slide = mySwiper.slides[num];
  slideLeft = slide.offsetLeft;
  slideWidth = slide.clientWidth;
  slideCenter = slideLeft + slideWidth / 2;
  // 被點(diǎn)擊slide的中心點(diǎn)
  mySwiper.setWrapperTransition(300);
  
  if (slideCenter < swiperWidth / 2) {
  
    mySwiper.setWrapperTranslate(0);
  
  } else if (slideCenter > maxWidth) {
  
    mySwiper.setWrapperTranslate(maxTranslate);
  
  } else {
  
    nowTlanslate = slideCenter - swiperWidth / 2;
  
    mySwiper.setWrapperTranslate(-nowTlanslate);
  
  }
 }
 })
 swiperWidth = mySwiper.container[0].clientWidth;
 maxTranslate = mySwiper.maxTranslate();
 maxWidth = -maxTranslate + swiperWidth / 2;
 $(".city-column-course").on('touchstart', function (e) {
   e.preventDefault();
 });
 //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 mySwiper.on('tap', function (swiper, e) {
   // e.preventDefault()
   slide = swiper.slides[swiper.clickedIndex];
   slideLeft = slide.offsetLeft;
   slideWidth = slide.clientWidth;
   slideCenter = slideLeft + slideWidth / 2;
   // 被點(diǎn)擊slide的中心點(diǎn)
   mySwiper.setWrapperTransition(300);
 
   if (slideCenter < swiperWidth / 2) {
 
     mySwiper.setWrapperTranslate(0);
 
   } else if (slideCenter > maxWidth) {
 
     mySwiper.setWrapperTranslate(maxTranslate);
 
   } else {
 
     nowTlanslate = slideCenter - swiperWidth / 2;
 
     mySwiper.setWrapperTranslate(-nowTlanslate);
 
   }
   $(".city-column-course .on").removeClass('on');
   $(".city-column-course .swiper-slide").eq(swiper.clickedIndex).addClass('on');
 cityList.slideTo(swiper.clickedIndex, 500, false);//切換到第一個(gè)slide


});

2.需求：滑動(dòng)這塊，導(dǎo)航選中的元素隨著變化

利用swiper怎么實(shí)現(xiàn)一個(gè)導(dǎo)航滾動(dòng)效果

<ul class="index-column-edu-nav clearfix">
   <li class="on"><a href="javascript:;" >培訓(xùn)匯</a></li>
   <li><a href="javascript:;" >新知識(shí)</a></li>
   <li><a href="javascript:;" >品牌專題</a></li>
  </ul>
  <div class="swiper-container index-edu-swiper">
   <div class="tab-box swiper-wrapper">
   <dl class="index-column-xun swiper-slide">
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英語(yǔ)口語(yǔ)小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英語(yǔ)口語(yǔ)小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
   </dl>
   <dl class="swiper-slide index-column-xun">
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英語(yǔ)口語(yǔ)小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英語(yǔ)口語(yǔ)小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英語(yǔ)口語(yǔ)小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
   </dl>
   <dl class="swiper-slide index-column-xun">
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">英語(yǔ)口語(yǔ)小技巧分享</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
    <dd class="clearfix">
    <div class="index-xun-item-left fl">
     <a href="#" class="title">高考英語(yǔ)語(yǔ)法填空題得分技巧</a>
     <p class="date">2020年09月27日</p>
    </div>
    <a href="#" class="index-xun-item-right fr">
     <img src="images/34340_4a110b.jpg" alt="">
    </a>
    </dd>
   </dl>
       
   </div>
</div>

js：

//js
var indexEdu = new Swiper('.index-edu-swiper',{
 slidesPerView : 1,
 onSlideChangeEnd: function(swiper){
  var num=swiper.activeIndex;
  $(".index-column-edu-nav").find("li").eq(num).addClass("on").siblings("li").removeClass("on");
 }
 })
 $(document).on("click",".index-column-edu-nav li",function(){
 $(this).addClass("on").siblings("li").removeClass("on");
 var num=$(this).index();
 indexEdu.slideTo(num, 500, false);//切換到第n個(gè)slide，速度為1秒
 })

看完上述內(nèi)容，你們對(duì)利用swiper怎么實(shí)現(xiàn)一個(gè)導(dǎo)航滾動(dòng)效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站欄目：利用swiper怎么實(shí)現(xiàn)一個(gè)導(dǎo)航滾動(dòng)效果-創(chuàng)新互聯(lián)
文章來源：http://www.rwnh.cn/article18/ddsjgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)頁(yè)設(shè)計(jì)公司、微信公眾號(hào)、靜態(tài)網(wǎng)站、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)

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

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

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

利用swiper怎么實(shí)現(xiàn)一個(gè)導(dǎo)航滾動(dòng)效果-創(chuàng)新互聯(lián)