swiper 写多个导航栏

最新推荐文章于 2022-09-01 14:24:18 发布

夜惊如水

最新推荐文章于 2022-09-01 14:24:18 发布

阅读量362

点赞数

分类专栏： html文件

本文链接：https://blog.csdn.net/qq_41422208/article/details/103734075

版权

html文件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="./swiper.min.css">
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        #topNav {
            width: 100%;
            overflow: hidden;
            font: 16px/32px hiragino sans gb, microsoft yahei, simsun;
            border-bottom:1px solid #f8f8f8;
        }
        #topNav .swiper-slide {
            padding: 0 5px;
            letter-spacing:2px;
            width:3rem;
            text-align:center;
        }
        #topNav .swiper-slide span{

            transition:all .3s ease;
            display:block;
        }
        #topNav .active span{
            transform:scale(1.1);
            color:#FF2D2D;
        }
        img{
            width:100%;
            line-height:0;
            }
    </style>
</head>
<body>
    <div id="topNav" class="swiper-container swiper-container-horizontal swiper-container-free-mode">
        <div class="swiper-wrapper" style="transition-duration: 300ms; transform: translate3d(-101px, 0px, 0px);">
          <div class="swiper-slide"><span>推荐</span></div>
          <div class="swiper-slide"><span>热点</span></div>
          <div class="swiper-slide"><span>深圳</span></div>
          <div class="swiper-slide"><span>视频</span></div>
          <div class="swiper-slide active"><span>社会</span></div>
          <div class="swiper-slide"><span>娱乐</span></div>
          <div class="swiper-slide"><span>科技</span></div>
          <div class="swiper-slide"><span>问答</span></div>
          <div class="swiper-slide"><span>汽车</span></div>
          <div class="swiper-slide"><span>财经</span></div>
          <div class="swiper-slide"><span>军事</span></div>
          <div class="swiper-slide swiper-slide-prev"><span>体育</span></div>
          <div class="swiper-slide swiper-slide-active"><span>段子</span></div>
          <div class="swiper-slide swiper-slide-next"><span>美女</span></div>
          <div class="swiper-slide"><span>国际</span></div>
          <div class="swiper-slide"><span>趣图</span></div>
          <div class="swiper-slide"><span>健康</span></div>
          <div class="swiper-slide"><span>特产</span></div>
          <div class="swiper-slide"><span>房产</span></div>
        </div>
      </div>
      <script src="./swiper.min.js"></script>
      <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
      <script>

            var mySwiper = new Swiper('#topNav', {
                freeMode: true,
                freeModeMomentumRatio: 0.5,
                slidesPerView: 'auto'
            });
            $("#topNav .swiper-slide").each(function(){
                $(this).click(function(){
                        swiperWidth = mySwiper.width

                        maxTranslate = mySwiper.maxTranslate();
                        maxWidth = -maxTranslate + swiperWidth / 2


                        slide = mySwiper.slides[mySwiper.clickedIndex]
                        slideLeft = slide.offsetLeft
                        slideWidth = slide.clientWidth
                        slideCenter = slideLeft + slideWidth / 2
                        // 被点击slide的中心点

                        mySwiper.setTranslate(300)

                        if (slideCenter < swiperWidth / 2) {

                            mySwiper.setTranslate(0)

                        } else if (slideCenter > maxWidth) {

                            mySwiper.setTranslate(maxTranslate)

                        } else {

                            nowTlanslate = slideCenter - swiperWidth / 2

                            mySwiper.setTranslate(-nowTlanslate)

                        }

                        $("#topNav  .active").removeClass('active')

                        $("#topNav .swiper-slide").eq(mySwiper.clickedIndex).addClass('active')

                })
            })



      </script>
</body>
</html>

夜惊如水

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
swiper 写多个导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫