整理分享：
<!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一些涉及的属性：