swiper实现点击和滑动切换导航

1.https://segmentfault.com/q/1010000008716893/a-1020000008717388
注意经测版本不能超过4.0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="swiper-3.3.1.min.css"/>-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.2/css/swiper.css">
        <style type="text/css">
            .swiper-container{
                width: 100%;
                height: 300px;
            }
            .swiper-wrapper{
                height: 100%;
            }
            .swiper-slide{
                height: 100%;
            }
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                width: 100%;
                overflow: hidden;
                position: relative;
            }
            li{
                line-height: 40px;
            }
            li{
              float: left;
              text-align: center;
              width: 33.3%;
              box-sizing: border-box;
            }
            li.on{
                background-color: greenyellow;
                color: #fff;
            }
            .more{
                background: transparent;
                height: 2px;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 33.3%;
                transition: all .2s  linear;
            }
            .more span{
                background: blue;
                height: 2px;
                position: absolute;
                left: 50%;
                bottom: 50%;
                transform: translate(-50%,-50%);
                width: 22px;
            }
        </style>
        <!--<script type="text/javascript" src="swiper.min.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.2/js/swiper.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <ul>
            <li>首页</li>
            <li>我们</li>
            <li>联系</li>
            <div class="more">
                <span></span>
            </div>
        </ul>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-color: red;">首页内容1</div>
            <div class="swiper-slide" style="background-color: yellow;">首页内容2</div>
            <div class="swiper-slide" style="background-color: green;">首页内容3</div>
          </div>
        </div>
        <script> 
        $(function(){
            var mySwiper = new Swiper('.swiper-container', {
                onTransitionEnd:function(swiper){
//                  $('li').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
                    $('.more').css('left',mySwiper.activeIndex*33.3+'%')    
                }
            })
            $('li').click(function(){
//              $(this).addClass('on').siblings().removeClass('on');
                $(this).parent().find('.more').css('left',$(this).index()*33.3+'%')    
                mySwiper.slideTo($(this).index(), 1000)
            });
        })        
        </script>
    </body>
</html>
来源：https://www.cnblogs.com/pipixiaolaohu/p/7890018.html
标签
swiper