swiper选项卡还可以左右滑动，最后一个直接跳转链接

整理分享：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
    <style>
        *{margin:0;padding:0}
        body,html{ max-width: 640px; margin: 0 auto; background-color: #ebebeb;}
        a{ text-decoration: none; color: #333 }
        li{list-style:none}
        .swiper_tab{ overflow: hidden; font-size: 18px; font-weight: 700; background-color: #fff; height: 40px; line-height: 40px; overflow: hidden; text-align: center;}
        .swiper_ul_wrap{width: 86%; float: left;}
        .swiper_ul{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}
        .swiper_ul li{display:flex;display:-webkit-flex;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center; position: relative; padding:0 10px;}
        .swiper_ul li:after{ content: ""; position: absolute; right: 1px; height:17px; width: 1px; background-color: #ebebeb  }
        .swiper_ul li.active span{position: relative; color: #e82e2e; }
        .swiper_ul li.active span:before{ content: ""; position: absolute; left:0; bottom:0; width: 100%; height: 3px; background-color: #e82e2e }
        .swiper_ul_last{width: 14%; float: left;}
        .swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}
        .swiper-slide{height:1px} /* 随意指定一个height值即可 */    
        .swiper-slide-active { height:auto}
  </style>
</head>

<body>
    <div class="swiper_tab_wrap" id="swiperTabWrap">
        <div class="swiper_tab">
            <div class="swiper_ul_wrap">
                <ul class="swiper_ul">
                    <li class="active"><span>推荐</span></li>
                    <li><span>生肖</span></li>
                    <li><span>看相</span></li>
                    <li><span>风水</span></li>
                    <li><span>取名</span></li>
                    <li><span>八字</span></li>
                </ul>
            </div>
            <a href="https://cs.fuyuandian.com" class="swiper_ul_last"><span>商城</span></a>
        </div>
        <div class="swiper-container" id="swiperTabCon">
            <div class="swiper-wrapper">
                <div class="swiper-slide">内容1</div>
                <div class="swiper-slide">内容2</div>
                <div class="swiper-slide">内容3</div>
                <div class="swiper-slide">内容14</div>
                <div class="swiper-slide">内容15</div>
                <div class="swiper-slide">内容16</div>
            </div>
        </div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
    <script type="text/javascript">
    var swiper = new Swiper('#swiperTabCon', {
        speed: 500,
        on: {
            slideChangeTransitionStart: function() { //swiper从当前slide开始过渡到另一个slide时执行
                var index = swiper.activeIndex;
                $('#swiperTabWrap ul li').removeClass('active').eq(index).addClass('active');
            }
        }
    });
    $('#swiperTabWrap ul li').on('click', function(e) {
        e.preventDefault(); 
        //得到当前索引
        var i = $(this).index();
        $('#swiperTabWrap ul li').removeClass('active').eq(i).addClass('active');
        swiper.slideTo(i, 1000, false);
    });
    </script>
</body>

</html>

 

效果如图：

 

 

参考swiper一些涉及的属性：

https://www.swiper.com.cn/api/event/91.html

https://www.swiper.com.cn/api/methods/109.html

 

posted @ 2019-08-09 22:55  前端HL  阅读(1327)  评论(0)  编辑  收藏  举报