在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ swiper 導(dǎo)航條 怎么實現(xiàn)點擊后定位居中?

swiper 導(dǎo)航條 怎么實現(xiàn)點擊后定位居中?

 
 <div id="topNav" class="swiper-container">
  <div class="daohang"> 
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><a href="#">推薦</a></li>
    <li class="swiper-slide"><a href="#">熱點</a></li>
    <li class="swiper-slide"><a href="#">深圳</a></li>
    <li class="swiper-slide"><a href="forum.php?mod=forumdisplay&fid=49">全網(wǎng)</a></li>
     <!--{if empty($personalnv['banitems']['2'])}-->
    <li class="swiper-slide{if $_GET[fid] == '2'} active{/if}"><a href="forum.php?mod=forumdisplay&fid=2">股市</a></li>
     <!--{/if}-->
    <li class="swiper-slide"><a href="#">娛樂</a></li>
    <li class="swiper-slide"><a href="#">科技</a></li>
    <li class="swiper-slide"><a href="#">問答</a></li>
    <li class="swiper-slide"><a href="#">汽車</a></li>
    <li class="swiper-slide"><a href="#">經(jīng)驗</a></li>
    <li class="swiper-slide"><a href="#">軍事</a></li>
    <li class="swiper-slide"><a href="#">體育</a></li>
    <li class="swiper-slide"><a href="#">段子</a></li>         
    <!--{if empty($personalnv['banitems']['49'])}-->
    <li class="swiper-slide{if $_GET[fid] == '49'} active{/if}"><a href="/forum.php?mod=forumdisplay&fid=49"><i class="bbbbb">美女</i></a></li> 
    <!--{/if}-->
    <li class="swiper-slide"><a href="#">國際</a></li>
    <li class="swiper-slide"><a href="#">趣圖</a></li>
    <li class="swiper-slide"><a href="#">健康</a></li>
    <li class="swiper-slide"><a href="#">特產(chǎn)</a></li>
    <li class="swiper-slide"><a href="#">房產(chǎn)</a></li>
  </ul>
</div> <div class=" gradient-r" style="opacity: 1;"></div>
        <div class=" gradient-l" style="opacity: 1;"></div>
        <a aria-label="展開頻道" role="button" href="/m/s/sort" target="_self" class=" expand-btn  "><i></i></a>
  </div>


 <script type="text/javascript">

  var mySwiper = new Swiper('#topNav .daohang', {
    freeMode: true,
    freeModeMomentumRatio: 0.5,
    slidesPerView: 'auto',

   });

swiperWidth = mySwiper.container[0].clientWidth
maxTranslate = mySwiper.maxTranslate();
maxWidth = -maxTranslate + swiperWidth / 2

mySwiper.on('tap', function(swiper, e) {

   slide = swiper.slides[swiper.clickedIndex]

   slideLeft = slide.offsetLeft

   slideWidth = slide.clientWidth

   slideCenter = slideLeft + slideWidth / 2

   // 被點擊slide的中心點

   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)

   }


})

</script>

圖片描述

我是新手,自己隨便亂寫的,已經(jīng)實現(xiàn)了滑動,點擊后無法定位,點擊后之前又回到第一個了。請大神幫忙一下~

回答
編輯回答
我以為

你這個描述看不懂要干嘛。
free模式 / 不貼合邊緣(150)這個例子看上去比較像。

2018年9月3日 10:49