用swiper实现类似淘抢购的滑动tab效果

Posted 欧辰0312

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用swiper实现类似淘抢购的滑动tab效果相关的知识，希望对你有一定的参考价值。

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

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>Swiper demo</title>
    <!-- Link Swiper\'s CSS -->
    <link rel="stylesheet" href="../assets/css/swiper.min.css" />
    <!-- Demo styles -->
    <style>
      body {
        margin: 0;
        padding: 0
      }
      
      .timeaxis-current:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 18;
        display: block;
        height: 0;
        width: 0;
        margin: auto;
        border-top: 7px solid #fc353a;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
      }
      
      #swiper-container3 {
        width: 100%;
        height: 60px;
        position: relative;
        left: 0;
      }
      
      #swiper-container3 .swiper-slide {
        height: 30px;
        width: 100px!important;
        font-size: 14px;
        text-align: center;
        color: #000;
      }
      
      .timeaxis-current {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40%;
        right: 40%;
        z-index: 1;
        background: #fc353a;
      }
      
      .timeaxis_warp {
        position: relative;
        background: #2d3845;
      }
      
      .timeaxis-item-inner {
        line-height: 20px;
        padding-top: 8px;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="timeaxis_warp">
      <div class="timeaxis-current"></div>
      <div class="swiper-container" id="swiper-container3">

        <div class="swiper-wrapper">
          <div class="swiper-slide" data-num="0">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">17:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="1">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">19:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="2">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">21:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="3">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">22:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="4">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">23:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="5">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">00:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="6">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">06:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="7">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">08:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="8">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">10:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="9">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">12:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="10">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">13:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="11">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">15:00</div>
              <div class="timeaxis-info">已开抢</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="12">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">17:00</div>
              <div class="timeaxis-info">即将开场</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="13">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">19:00</div>
              <div class="timeaxis-info">即将开场</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="14">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">21:00</div>
              <div class="timeaxis-info">即将开场</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="15">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">22:00</div>
              <div class="timeaxis-info">即将开场</div>
            </div>
          </div>
          <div class="swiper-slide" data-num="16">
            <div class="timeaxis-item-inner">
              <div class="timeaxis-time">23:00</div>
              <div class="timeaxis-info">即将开场</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- Swiper JS -->
    <script src="../assets/js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
      var mySwiper = new Swiper(\'.swiper-container\', {
        initialSlide :1,
        slidesPerView: "auto",
        /*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 \'auto\'则自动根据slides的宽度来设定数量。*/
        freeMode: true,
        /*自动贴合*/
        freeModeSticky: true,
        /*自动贴合。*/
        centeredSlides: true,
        /*设定为true时，活动块会居中，而不是默认状态下的居左。*/
        slideToClickedSlide: true,
        /*设置为true则swiping时点击slide会过渡到这个slide。*/
        centeredSlides: true,
        /*设定为true时，活动块会居中，而不是默认状态下的居左。*/
        onInit: function(swiper) { /*回调函数，初始化后执行。*/
        
          $(".swiper-slide-active").css({
            "color": \'#fff\',
            "font-weight": \'bold\'
          });
        },

        onTransitionEnd: function() {
          /* alert(     $(".swiper-slide-active").attr("data-num"));  ajax传参数*/
          $(".swiper-slide-active").css({
            "color": \'#fff\',
            "font-weight": \'bold\'
          });
        },
        onTouchMove: function() {
          $(".swiper-slide").not(\'.swiper-slide-active\').css({
            "color": \'#000\',
            "font-weight": \'normal\'
          });
        }

      })
    </script>
    <script>
    </script>
  </body>

</html>

效果如下图

 

以上是关于用swiper实现类似淘抢购的滑动tab效果的主要内容，如果未能解决你的问题，请参考以下文章

swipe.js怎么动态添加滑动元素

移动端tab滑动和上下拉刷新加载

微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）

swiper.js滑动插件

Swiper的基本使用

关于Tab切换中嵌套Swiper移动端滑动插件，导致Swiper插件失效的问题