今日头条头部导航 

<!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-width: 320px;
      max-width: 640px;
      margin: 0 auto;
      color: #333;
      padding: 0;
      font-family: "Microsoft Yahei";
      text-align: center;
    }

    .container {
      /*width: 100%;*/
      border: 1px solid #ccc;
    }

    .swiper1 {
      width: 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 {
      width: 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="width: 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>

 

posted @ 2018-04-09 17:54  JeneryYang  阅读(425)  评论(0)  编辑  收藏  举报