jQuery+swiper实现时间轴tab滑动切换显示效果

 3223

根据时间轴进行tab页面内容切换?下面本篇文章给大家介绍一下jquery时间轴tab切换效果实现结合swiper实现滑动显示效果的方法,希望对大家有所帮助!


jQuery+swiper实现时间轴tab滑动切换显示效果


需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择)

实现思路:

结合swiper插件实现滑动显示效果

根据transform: translateX进行左侧切换效果的实现(具体实现css如下),实现非滚动的点击切换效果,结合swiper进行修改。【相关教程推荐:jQuery教程】

实现效果:


jQuery+swiper实现时间轴tab滑动切换显示效果

实现代码:需要配合swiper组件使用;左侧导航是根据html结构和css3代码,来生成的时间轴效果效果来源于http://www.htmleaf.com/css3/ui-design/201911275850.html

Swiper基础演示地址:https://www.swiper.com.cn/demo/index.html


HTML:

  1. <div class="swiper-container box">
  2.   <div class="swiper-wrapper main-timeline">
  3.     <div class="swiper-slide timeline fd-active-line">
  4.       <a href="javascript:void(0);" class="timeline-content">
  5.         <div class="timeline-year">
  6.           <span>2019</span>
  7.         </div>
  8.       </a>
  9.       <div class="xians"></div>
  10.     </div>
  11.     <div class="swiper-slide timeline">
  12.       <a href="javascript:void(0);" class="timeline-content">
  13.         <div class="timeline-year">
  14.           <span>2018</span>
  15.         </div>
  16.       </a>
  17.       <div class="xians"></div>
  18.     </div>
  19.     <div class="swiper-slide timeline">
  20.       <a href="javascript:void(0);" class="timeline-content">
  21.         <div class="timeline-year">
  22.           <span>2017</span>
  23.         </div>
  24.       </a>
  25.       <div class="xians"></div>
  26.     </div>
  27.     <div class="swiper-slide timeline">
  28.       <a href="javascript:void(0);" class="timeline-content">
  29.         <div class="timeline-year">
  30.           <span>2016</span>
  31.         </div>
  32.       </a>
  33.       <div class="xians"></div>
  34.     </div>
  35.     <div class="swiper-slide timeline">
  36.       <a href="javascript:void(0);" class="timeline-content">
  37.         <div class="timeline-year">
  38.           <span>2015</span>
  39.         </div>
  40.       </a>
  41.       <div class="xians"></div>
  42.     </div>
  43.     <div class="swiper-slide timeline">
  44.       <a href="javascript:void(0);" class="timeline-content">
  45.         <div class="timeline-year">
  46.           <span>2014</span>
  47.         </div>
  48.       </a>
  49.       <div class="xians"></div>
  50.     </div>
  51.   </div>
  52. </div>
  53. <ul class="event_list">
  54.   <div>
  55.     <h3 id="2012">2019</h3>
  56.     <img src="./img/lh.jpg" alt="">
  57.   </div>
  58.   <div style="display: none;">
  59.     <h3 id="2012">2018</h3>
  60.     <img src="./img/lhls.jpg" alt="">
  61.   </div>
  62.   <div style="display: none;">
  63.     <h3 id="2011">2017</h3>
  64.     <img src="./img/lkss.jpg" alt="">
  65.   </div>
  66.   <div style="display: none;">
  67.     <h3 id="2011">2016</h3>
  68.     <img src="./img/luhu.jpg" alt="">
  69.   </div>
  70.   <div style="display: none;">
  71.     <h3 id="2011">2015</h3>
  72.     <img src="./img/luhuwhite.jpg" alt="">
  73.   </div>
  74.   <div style="display: none;">
  75.     <h3 id="2011">2014</h3>
  76.     <img src="./img/lhls.jpg" alt="">
  77.   </div>
  78. </ul>
  79. </div>

所需外部链接文件:

  1. <script src="js/jquery.min_v1.0.js" type="text/javascript"></script>  
  2. <script src="js/swiper-bundle.min.js" type="text/javascript"></script>  
  3. <link rel="stylesheet" href="css/swiper-bundle.min.css">

CSS:

  1. .page {
  2.   width: 100%;
  3. }
  4.   
  5. .main-timeline {
  6.   font-family: 'Roboto', sans-serif;
  7.   width: 200px;
  8.   position: relative;
  9.   float: left;
  10. }
  11.   
  12. .main-timeline:after {
  13.   content: '';
  14.   display: block;
  15.   clear: both;
  16. }
  17.   
  18. .main-timeline:before {
  19.   /* content: '';
  20.   height: calc(100% + 80px);
  21.   width: 0px;
  22.   border: 2px solid #0870C5;
  23.   transform: translateX(-50%);
  24.   position: absolute;
  25.   left: 114px;
  26.   top: 0px; */
  27. }
  28.   
  29. .main-timeline .timeline {
  30.   width: 4%;
  31.   /* padding: 140px 70px 0 25px; */
  32.   margin: 0 50px 0 0;
  33.   float: left;
  34.   position: relative;
  35. }
  36.   
  37. .main-timeline .timeline-content {
  38.   /* padding: 15px 15px 15px 40px;
  39.   border: 2px solid #00A79B; */
  40.   border-radius: 15px 0 15px 15px;
  41.   display: block;
  42.   position: relative;
  43. }
  44.   
  45. .main-timeline .timeline-content:hover {
  46.   text-decoration: none;
  47. }
  48.   
  49. .fd-active-line .timeline-content:after {
  50.   content: '';
  51.   background-color: #00A79B;
  52.   height: 18px;
  53.   width: 15px;
  54.   position: absolute;
  55.   right: -43px;
  56.   top: 27px;
  57.   /* clip-path: polygon(100% 0, 0 0, 0 100%); */
  58. }
  59.   
  60. .main-timeline .timeline-year {
  61.   color: #fff;
  62.   background-color: #00A79B;
  63.   font-size: 24px;
  64.   font-weight: 900;
  65.   text-align: center;
  66.   line-height: 80px;
  67.   height: 80px;
  68.   width: 80px;
  69.   border-radius: 50%;
  70.   position: absolute;
  71.   right: -120px;
  72.   top: -40px;
  73. }
  74.   
  75. .main-timeline .timeline-year:after {
  76.   content: '';
  77.   height: 100px;
  78.   width: 100px;
  79.   border: 8px solid #00A79B;
  80.   border-left-color: transparent;
  81.   border-radius: 50%;
  82.   transform: translateX(-50%) translateY(-50%) rotate(-20deg);
  83.   position: absolute;
  84.   left: 50%;
  85.   top: 50%;
  86. }
  87.   
  88. .main-timeline .timeline-icon {
  89.   color: #fff;
  90.   background-color: #00A79B;
  91.   font-size: 35px;
  92.   text-align: center;
  93.   line-height: 50px;
  94.   height: 50px;
  95.   width: 50px;
  96.   border-radius: 50%;
  97.   transform: translateY(-50%);
  98.   position: absolute;
  99.   top: 50%;
  100.   left: -25px;
  101.   transition: all 0.3s;
  102. }
  103.   
  104. .main-timeline .title {
  105.   color: #222;
  106.   font-size: 20px;
  107.   font-weight: 900;
  108.   text-transform: uppercase;
  109.   letter-spacing: 1px;
  110.   margin: 0 0 7px 0;
  111. }
  112.   
  113. .main-timeline .description {
  114.   color: #222;
  115.   font-size: 15px;
  116.   letter-spacing: 1px;
  117.   text-align: justify;
  118.   margin: 0 0 5px;
  119. }
  120.   
  121. .main-timeline .timeline:nth-child(even) .timeline-content {}
  122.   
  123. .main-timeline .timeline:nth-child(even) .timeline-content:after {
  124.   transform: rotateY(180deg);
  125.   right: auto;
  126.   left: 123px;
  127. }
  128.   
  129. .main-timeline .timeline:nth-child(even) .timeline-year:after {
  130.   transform: translateX(-50%) translateY(-50%) rotate(200deg);
  131. }
  132.   
  133. .main-timeline .timeline:nth-child(even) .timeline-icon {
  134.   left: auto;
  135.   right: -25px;
  136. }
  137.   
  138. .timeline:nth-child(4n+2) .timeline-content,
  139. .timeline:nth-child(4n+2) .timeline-year:after {
  140.   border-color: #9E005D;
  141. }
  142.   
  143. .timeline:nth-child(4n+2) .timeline-year:after {
  144.   border-left-color: transparent;
  145. }
  146.   
  147. .timeline:nth-child(4n+2) .timeline-content:after,
  148. .timeline:nth-child(4n+2) .timeline-icon,
  149. .timeline:nth-child(4n+2) .timeline-year {
  150.   background-color: #9E005D;
  151. }
  152.   
  153. .timeline:nth-child(4n+3) .timeline-content,
  154. .timeline:nth-child(4n+3) .timeline-year:after {
  155.   border-color: #f24f0e;
  156. }
  157.   
  158. .timeline:nth-child(4n+3) .timeline-year:after {
  159.   border-left-color: transparent;
  160. }
  161.   
  162. .timeline:nth-child(4n+3) .timeline-content:after,
  163. .timeline:nth-child(4n+3) .timeline-icon,
  164. .timeline:nth-child(4n+3) .timeline-year {
  165.   background-color: #f24f0e;
  166. }
  167.   
  168. .timeline:nth-child(4n+4) .timeline-content,
  169. .timeline:nth-child(4n+4) .timeline-year:after {
  170.   border-color: #0870C5;
  171. }
  172.   
  173. .timeline:nth-child(4n+4) .timeline-year:after {
  174.   border-left-color: transparent;
  175. }
  176.   
  177. .timeline:nth-child(4n+4) .timeline-content:after,
  178. .timeline:nth-child(4n+4) .timeline-icon,
  179. .timeline:nth-child(4n+4) .timeline-year {
  180.   background-color: #0870C5;
  181. }
  182.   
  183. @media screen and (max-width:767px) {
  184.   .main-timeline:before {
  185.     display: none;
  186.   }
  187.   
  188.   .main-timeline .timeline {
  189.     width: 100%;
  190.     padding-top: 80px;
  191.     padding-right: 12px;
  192.     margin-bottom: 20px;
  193.   }
  194.   
  195.   .main-timeline .timeline:nth-child(even) {
  196.     padding-left: 10px;
  197.     padding-top: 80px;
  198.     margin-bottom: 20px;
  199.   }
  200.   
  201.   .main-timeline .timeline-content,
  202.   .main-timeline .main-timeline .timeline:nth-child(even) .timeline-content {
  203.     background-color: #fff;
  204.     padding-top: 25px;
  205.   }
  206.   
  207.   .main-timeline .timeline-content:after {
  208.     display: none;
  209.   }
  210.   
  211.   .main-timeline .timeline-year {
  212.     font-size: 24px;
  213.     line-height: 70px;
  214.     height: 70px;
  215.     width: 70px;
  216.     right: 0;
  217.     top: -65px;
  218.   }
  219.   
  220.   .main-timeline .timeline-year:after {
  221.     display: none;
  222.   }
  223.   
  224.   .main-timeline .timeline:nth-child(even) .timeline-year {
  225.     left: 3px;
  226.   }
  227. }
  228.   
  229. @media screen and (max-width:567px) {
  230.   .main-timeline .title {
  231.     font-size: 18px;
  232.   }
  233. }
  234.   
  235. .swiper-container {
  236.   width: 205px;
  237.   height: 500px;
  238.   float: left;
  239. }
  240.   
  241. .swiper-slide {
  242.   text-align: center;
  243.   font-size: 18px;
  244.   background: #fff;
  245.   
  246.   /* Center slide text vertically */
  247.   display: -webkit-box;
  248.   display: -ms-flexbox;
  249.   display: -webkit-flex;
  250.   display: flex;
  251.   -webkit-box-pack: center;
  252.   -ms-flex-pack: center;
  253.   -webkit-justify-content: center;
  254.   justify-content: center;
  255.   -webkit-box-align: center;
  256.   -ms-flex-align: center;
  257.   -webkit-align-items: center;
  258.   align-items: center;
  259. }
  260.   
  261. @media (max-width: 760px) {
  262.   .swiper-button-next {
  263.     right: 20px;
  264.     transform: rotate(90deg);
  265.   }
  266.   
  267.   .swiper-button-prev {
  268.     left: 20px;
  269.     transform: rotate(90deg);
  270.   }
  271. }
  272. .event_list img {
  273.   width: 880px;
  274.   height: 470px;
  275.   object-fit: cover;
  276. }
  277. .xians {
  278.   width: 3px;
  279.   height: 100%;
  280.   background: #0870C5;
  281.   position: absolute;
  282.   left: 82px;
  283.   z-index: -1;
  284. }

js:

  1. <script>
  2.   $(function () {
  3.     $(".main-timeline .timeline").click(function () {
  4.       var TAG = $(this).siblings().length;
  5.       if (TAG >= 1) {
  6.         var index = $(this).index()
  7.         $(this).addClass('fd-active-line').siblings().removeClass('fd-active-line')
  8.         $(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
  9.       }
  10.     })
  11.     var swiper = new Swiper('.swiper-container', {
  12.       slidesPerView: 4,
  13.       direction: 'vertical',
  14.       navigation: {
  15.         nextEl: '.swiper-button-next',
  16.         prevEl: '.swiper-button-prev',
  17.       },
  18.       on: {
  19.         resize: function () {
  20.           swiper.changeDirection(getDirection());
  21.         }
  22.       }
  23.     });
  24.   });
  25. </script>


swiper使用方法

1、首先加载插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件,不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。

  1. <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
  2. <script src="dist/js/swiper-bundle.min.js"></script>

2、HTML内容。

  1. <div class="swiper-container">
  2.     <div class="swiper-wrapper">
  3.         <div class="swiper-slide">Slide 1</div>
  4.         <div class="swiper-slide">Slide 2</div>
  5.         <div class="swiper-slide">Slide 3</div>
  6.     </div>
  7.     <!-- 如果需要分页器 -->
  8.     <div class="swiper-pagination"></div>
  9.      
  10.     <!-- 如果需要导航按钮 -->
  11.     <div class="swiper-button-prev"></div>
  12.     <div class="swiper-button-next"></div>
  13.      
  14.     <!-- 如果需要滚动条 -->
  15.     <div class="swiper-scrollbar"></div>
  16. </div>

导航等组件可以放在container之外


3、你可能想要给Swiper定义一个大小,当然不要也行。

  1. .swiper-container {
  2.     width: 600px;
  3.     height: 300px;
  4. }

4、初始化Swiper。Swiper6之前的默认容器是'.swiper-container',Swiper7以后是'.swiper'。

  1. <script>
  2.     var mySwiper = new Swiper('.swiper-container', {
  3.         direction: 'vertical', // 垂直切换选项
  4.         loop: true, // 循环模式选项
  5.  
  6.         // 如果需要分页器
  7.         pagination: {
  8.             el: '.swiper-pagination',
  9.         },
  10.  
  11.         // 如果需要前进后退按钮
  12.         navigation: {
  13.             nextEl: '.swiper-button-next',
  14.             prevEl: '.swiper-button-prev',
  15.         },
  16.  
  17.         // 如果需要滚动条
  18.         scrollbar: {
  19.             el: '.swiper-scrollbar',
  20.         },
  21.     })
  22. </script>

5、完成。恭喜你,现在你的Swiper应该已经能正常切换了。

如果作为CommonJs 或ES 模块引入

  1. //CommonJs
  2. var Swiper = require('swiper');    
  3. var mySwiper = new Swiper('.swiper-container', { /* ... */ });
  4.   
  5. //ES
  6. import Swiper from 'swiper';    
  7. var mySwiper = new Swiper('.swiper-container', { /* ... */ });


本文网址:https://www.zztuku.com/detail-13075.html
站长图库 - jQuery+swiper实现时间轴tab滑动切换显示效果
申明:本文转载于《博客园》,如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐