<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>今日头条头部导航</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/js/jquery.min.js"></script> <script type="text/javascript" src="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/js/swiper-3.4.0.jquery.min.js"></script> <link rel="stylesheet" href="http://www.17sucai.com/preview/1/2017-09-25/swiperTab/css/swiper-3.2.7.min.css" /> <style> body { min- 320px; max- 640px; margin: 0 auto; color: #333; padding: 0; font-family: "Microsoft Yahei"; text-align: center; } .container { /* 100%;*/ border: 1px solid #ccc; } .swiper1 { 100%; } .swiper1 .selected { color: #ec5566; border-bottom: 2px solid #ec5566; } .swiper1 .swiper-slide { text-align: center; font-size: 16px; height: 50px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; } .swiper2 { 100%; } .swiper2 .swiper-slide { height: calc(100vh - 50px); background-color: #ccc; color: #fff; text-align: center; box-sizing: border-box !important; overflow-x: hidden !important; } </style> </head> <body> <div class="container"> <div class="swiper-container swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide selected">推荐</div> <div class="swiper-slide">菜单 2</div> <div class="swiper-slide">菜单 3</div> <div class="swiper-slide">菜单 4</div> <div class="swiper-slide">菜单 5</div> <div class="swiper-slide">菜单 6</div> <div class="swiper-slide">菜单 7</div> <div class="swiper-slide">菜单 8</div> <div class="swiper-slide">菜单 9</div> <div class="swiper-slide">菜单 10</div> </div> </div> <!-- swiper2 --> <div class="swiper-container swiper2"> <div class="swiper-wrapper"> <div class="swiper-slide "> <div style=" 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div> </div> <div class="swiper-slide">上面导航栏可以滑动2222</div> <div class="swiper-slide">内容 213213123</div> <div class="swiper-slide">内容 ressssssss</div> <div class="swiper-slide">内容 ffffffffffff</div> <div class="swiper-slide">内容 bbbbbbbbbbbbbbbbbvb</div> <div class="swiper-slide">内容 bvcccccccccccbvb</div> <div class="swiper-slide">内容 sdasdssssss</div> <div class="swiper-slide">内容 oiouiouioiuoiuo</div> <div class="swiper-slide">内容 m,jnkjhkhgjghjugh</div> </div> </div> </div> <script> $(function () { function setCurrentSlide(ele, index) { $(".swiper1 .swiper-slide").removeClass("selected"); ele.addClass("selected"); } var swiper1 = new Swiper('.swiper1', { slidesPerView: 5.5, paginationClickable: true, spaceBetween: 10, freeMode: true, loop: false, onTab: function (swiper) { var n = swiper1.clickedIndex; } }); swiper1.slides.each(function (index, val) { var ele = $(this); ele.on("click", function () { setCurrentSlide(ele, index); swiper2.slideTo(index, 500, false); }); }); var swiper2 = new Swiper('.swiper2', { direction: 'horizontal', loop: false,
effect : 'flip',
autoHeight: true, onSlideChangeEnd: function (swiper) { var n = swiper.activeIndex; setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n); swiper1.slideTo(n, 500, false); } }); }); </script> </body> </html>