jquery+swiper组件实现时间轴滑动年份tab切换效果

程序员文章站 2021-12-02 10:59:50

实现效果：实现代码：需要配合swiper组件使用swiper基础演示地址：https://www.swiper.com.cn/demo/index.htmlhtml:

实现效果：

实现代码：需要配合swiper组件使用

swiper基础演示地址：

https://www.swiper.com.cn/demo/index.html

html:

<div class="swiper-container box">
    <div class="swiper-wrapper main-timeline">
      <div class="swiper-slide timeline fd-active-line">
        <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="timeline-content">
          <div class="timeline-year">
            <span>2019</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="swiper-slide timeline">
        <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="timeline-content">
          <div class="timeline-year">
            <span>2018</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="swiper-slide timeline">
        <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="timeline-content">
          <div class="timeline-year">
            <span>2017</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="swiper-slide timeline">
        <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="timeline-content">
          <div class="timeline-year">
            <span>2016</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="swiper-slide timeline">
        <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="timeline-content">
          <div class="timeline-year">
            <span>2015</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="swiper-slide timeline">
        <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="timeline-content">
          <div class="timeline-year">
            <span>2014</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
    </div>
  </div>
  <ul class="event_list">
    <div>
      <h3 id="2012">2019</h3>
      <img src="./img/lh.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2012">2018</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2017</h3>
      <img src="./img/lkss.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2016</h3>
      <img src="./img/luhu.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2015</h3>
      <img src="./img/luhuwhite.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2014</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
  </ul>
  </div>

所需外部链接文件：

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

css

.page {
  width: 100%;
}
 
.main-timeline {
  font-family: 'roboto', sans-serif;
  width: 200px;
  position: relative;
  float: left;
}
 
.main-timeline:after {
  content: '';
  display: block;
  clear: both;
}
 
.main-timeline:before {
  /* content: '';
  height: calc(100% + 80px);
  width: 0px;
  border: 2px solid #0870c5;
  transform: translatex(-50%);
  position: absolute;
  left: 114px;
  top: 0px; */
}
 
.main-timeline .timeline {
  width: 4%;
  /* padding: 140px 70px 0 25px; */
  margin: 0 50px 0 0;
  float: left;
  position: relative;
}
 
.main-timeline .timeline-content {
  /* padding: 15px 15px 15px 40px;
  border: 2px solid #00a79b; */
  border-radius: 15px 0 15px 15px;
  display: block;
  position: relative;
}
 
.main-timeline .timeline-content:hover {
  text-decoration: none;
}
 
.fd-active-line .timeline-content:after {
  content: '';
  background-color: #00a79b;
  height: 18px;
  width: 15px;
  position: absolute;
  right: -43px;
  top: 27px;
  /* clip-path: polygon(100% 0, 0 0, 0 100%); */
}
 
.main-timeline .timeline-year {
  color: #fff;
  background-color: #00a79b;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 80px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  right: -120px;
  top: -40px;
}
 
.main-timeline .timeline-year:after {
  content: '';
  height: 100px;
  width: 100px;
  border: 8px solid #00a79b;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translatex(-50%) translatey(-50%) rotate(-20deg);
  position: absolute;
  left: 50%;
  top: 50%;
}
 
.main-timeline .timeline-icon {
  color: #fff;
  background-color: #00a79b;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transform: translatey(-50%);
  position: absolute;
  top: 50%;
  left: -25px;
  transition: all 0.3s;
}
 
.main-timeline .title {
  color: #222;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 7px 0;
}
 
.main-timeline .description {
  color: #222;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: justify;
  margin: 0 0 5px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-content {}
 
.main-timeline .timeline:nth-child(even) .timeline-content:after {
  transform: rotatey(180deg);
  right: auto;
  left: 123px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-year:after {
  transform: translatex(-50%) translatey(-50%) rotate(200deg);
}
 
.main-timeline .timeline:nth-child(even) .timeline-icon {
  left: auto;
  right: -25px;
}
 
.timeline:nth-child(4n+2) .timeline-content,
.timeline:nth-child(4n+2) .timeline-year:after {
  border-color: #9e005d;
}
 
.timeline:nth-child(4n+2) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+2) .timeline-content:after,
.timeline:nth-child(4n+2) .timeline-icon,
.timeline:nth-child(4n+2) .timeline-year {
  background-color: #9e005d;
}
 
.timeline:nth-child(4n+3) .timeline-content,
.timeline:nth-child(4n+3) .timeline-year:after {
  border-color: #f24f0e;
}
 
.timeline:nth-child(4n+3) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+3) .timeline-content:after,
.timeline:nth-child(4n+3) .timeline-icon,
.timeline:nth-child(4n+3) .timeline-year {
  background-color: #f24f0e;
}
 
.timeline:nth-child(4n+4) .timeline-content,
.timeline:nth-child(4n+4) .timeline-year:after {
  border-color: #0870c5;
}
 
.timeline:nth-child(4n+4) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+4) .timeline-content:after,
.timeline:nth-child(4n+4) .timeline-icon,
.timeline:nth-child(4n+4) .timeline-year {
  background-color: #0870c5;
}
 
@media screen and (max-width:767px) {
  .main-timeline:before {
    display: none;
  }
 
  .main-timeline .timeline {
    width: 100%;
    padding-top: 80px;
    padding-right: 12px;
    margin-bottom: 20px;
  }
 
  .main-timeline .timeline:nth-child(even) {
    padding-left: 10px;
    padding-top: 80px;
    margin-bottom: 20px;
  }
 
  .main-timeline .timeline-content,
  .main-timeline .main-timeline .timeline:nth-child(even) .timeline-content {
    background-color: #fff;
    padding-top: 25px;
  }
 
  .main-timeline .timeline-content:after {
    display: none;
  }
 
  .main-timeline .timeline-year {
    font-size: 24px;
    line-height: 70px;
    height: 70px;
    width: 70px;
    right: 0;
    top: -65px;
  }
 
  .main-timeline .timeline-year:after {
    display: none;
  }
 
  .main-timeline .timeline:nth-child(even) .timeline-year {
    left: 3px;
  }
}
 
@media screen and (max-width:567px) {
  .main-timeline .title {
    font-size: 18px;
  }
}
 
.swiper-container {
  width: 205px;
  height: 500px;
  float: left;
}
 
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
 
  /* 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;
}
 
@media (max-width: 760px) {
  .swiper-button-next {
    right: 20px;
    transform: rotate(90deg);
  }
 
  .swiper-button-prev {
    left: 20px;
    transform: rotate(90deg);
  }
}
.event_list img {
  width: 880px;
  height: 470px;
  object-fit: cover;
}
.xians {
  width: 3px;
  height: 100%;
  background: #0870c5;
  position: absolute;
  left: 82px;
  z-index: -1;
}

js:

 <script>
    $(function () {
      $(".main-timeline .timeline").click(function () {
        var tag = $(this).siblings().length;
        if (tag >= 1) {
          var index = $(this).index()
          $(this).addclass('fd-active-line').siblings().removeclass('fd-active-line')
          $(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
        }
      })
      var swiper = new swiper('.swiper-container', {
        slidesperview: 4,
        direction: 'vertical',
        navigation: {
          nextel: '.swiper-button-next',
          prevel: '.swiper-button-prev',
        },
        on: {
          resize: function () {
            swiper.changedirection(getdirection());
          }
        }
      });
    });
  </script>

到此这篇关于jquery实现时间轴滑动年份tab切换（配合swiper组件实现时间轴滑动效果）的文章就介绍到这了,更多相关jquery时间轴滑动切换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

相关标签： jquery 时间轴滑动切换

上一篇： Sql Server 2012完全卸载方法只需8步轻松卸载

下一篇：分组后分组合计以及总计SQL语句（稍微整理了一下）

jquery+swiper组件实现时间轴滑动年份tab切换效果

js实现移动端tab切换时下划线滑动效果

详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

vue使用动态组件实现TAB切换效果

jquery+swiper组件实现时间轴滑动年份tab切换效果

js实现移动端tab切换时下划线滑动效果

详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

jQuery实现有幻灯效果tab滑动切换菜单

微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）

微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）

JS+CSS实现滑动切换tab菜单效果_javascript技巧