结合swiper实现选项卡(菜单可拖动)

在这里插入图片描述
swiper官网:https://www.swiper.com.cn/

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
  <title>swiper选项卡</title>
</head>
<style>
  .main {
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border: 2px solid #4390EE;
  }

  .tab-wrap {
    height: 50px;
    width: 100%;
    background-color: #4390EE;
  }

  .swiper-container {
    height: 100%;
  }

  .nav {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    cursor: pointer;
  }

  .active {
    color: #FF4500;
  }

  .tab-cont {
    width: 100%;
    height: 450px;
    position: relative;
  }

  .poster {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .poster img {
    width: 100%;
    height: 100%;
  }

  .hidd {
    display: none;
  }
</style>

<body>
  <div class="main">
    <div class="tab-wrap">
      <div class="swiper-container" id="swiper">
        <div class="swiper-wrapper nav-wrap">
          <!-- 导航由数据渲染 -->

        </div>
      </div>
    </div>
    <div class="tab-cont">
      <!-- <div class="poster">
        <img src="./img/img1.jpeg" alt="">
      </div> -->
      <!-- 方式一:内容由数据渲染 -->

      <!-- 方式二:通过控制元素的显示隐藏来切换 -->
      <!-- <div class="poster hidd" style="display: block;">
        <img src="./img/img1.jpg" alt="">
      </div>
      <div class="poster hidd">
        <img src="./img/img2.jpg" alt="">
      </div>
      <div class="poster hidd">
        <img src="./img/img3.jpg" alt="">
      </div>
      <div class="poster hidd">
        <img src="./img/img4.jpg" alt="">
      </div>
      <div class="poster hidd">
        <img src="./img/img5.jpg" alt="">
      </div>
      <div class="poster hidd">
        <img src="./img/img6.jpg" alt="">
      </div> -->



    </div>
  </div>


  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
  <script>
    (function (_this) {
      // 菜单模拟数据
      let nav_Data = ['全部', "分类一", '分类二', '分类三', '分类四', '分类五']
      // 选项卡菜单渲染(在轮播注册前面)
      $(_this).on('load', function () { nav_menu(nav_Data) })
      function nav_menu(data) {
        let tab_html = ''
        data.forEach((item, index) => {
          tab_html += `<div class="swiper-slide nav" data-id='${index}'>${item}</div>`
        });
        $('.nav-wrap').append(tab_html);
        $('.nav-wrap').children(':eq(0)').addClass('active')//默认给第一个是激活状态
      }

      // 选项卡轮播注册(在菜单渲染之后)
      $(function () {
        var mySwiper = new Swiper('.swiper-container', {
          direction: 'horizontal',//切换方式,水平切换
          loop: false,//是否无缝循环
          freeMode: true, // slide 是否贴合侧边
          slidesPerView: 5,//可视区域默认显示的个数
          freeModeSticky: false,//使得freeMode也能自动贴合
          roundLengths: true, //防止文字模糊
          observer: true, //修改swiper自己或子元素时,自动初始化swiper
          observeParents: true, //修改swiper的父元素时,自动初始化swiper
          initialSlide: 0,//默认从下标为0的开始显示
        });
      })

      //方式一:通过传入数据进行渲染
      // 方式一模拟数据
      let objData = [
        {
          img: './img/img1.jpg'
        },
        {
          img: './img/img2.jpg'
        },
        {
          img: './img/img3.jpg'
        },
        {
          img: './img/img4.jpg'
        },
        {
          img: './img/img5.jpg'
        },
        {
          img: './img/img6.jpg'
        },
      ];

      $('.nav-wrap').on('click', '.nav', tab)
      function tab(event) {
        let tar = event.currentTarget//获取当前点击的元素
        $(tar).addClass('active').siblings().removeClass('active')//点击到那个元素赋予它激活状态,并清除它兄弟的状态
        let id = parseInt($(tar).attr('data-id'))//获取nav的data-id并由字符串转为数字
        switch (id) {//当点击导航时根据id传入相应的参数
          case 0:
            tab_cont(objData[0])
            break
          case 1:
            tab_cont(objData[1])
            break
          case 2:
            tab_cont(objData[2])
            break
          case 3:
            tab_cont(objData[3])
            break
          case 4:
            tab_cont(objData[4])
            break
          case 5:
            tab_cont(objData[5])
            break
        }
      };
      $(_this).on('load', function () { tab_cont(objData[0]) })//加载完成后传入默认显示的数据进行显示
      function tab_cont(data) {
        // console.log(data);
        tab_cont_html = `
          <div class="poster">
            <img src="${data.img}" alt="">
         </div> `
        $('.tab-cont').html(tab_cont_html)
      }


      // 方式二:通过控制内容显示隐藏实现切换
      // $('.nav-wrap').on('click', '.nav', tab)
      // function tab(event) {
      //   let tar = event.currentTarget//获取当前点击的元素
      //   $(tar).addClass('active').siblings().removeClass('active')//点击到那个元素赋予它激活状态,并清除它兄弟的状态
      //   let id = parseInt($(tar).attr('data-id'))//获取nav的data-id并由字符串转为数字
      //   $('.tab-cont').children().hide()//先隐藏全部内容
      //   $('.tab-cont').children(':eq(' + id + ')').show()//显示当前活动的内容

      // }
    })(window)
  </script>
</body>

</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值