扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >怎么用jquery+swiper实现时间轴tab滑动切换显示效果
  • 474

0
分享到

怎么用jquery+swiper实现时间轴tab滑动切换显示效果

2024-04-02 19:04:59 474人浏览 薄情痞子
摘要

这篇文章主要介绍“怎么用Jquery+swiper实现时间轴tab滑动切换显示效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用jquery+swiper实现

这篇文章主要介绍“怎么用Jquery+swiper实现时间轴tab滑动切换显示效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用jquery+swiper实现时间轴tab滑动切换显示效果”文章能帮助大家解决问题。

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

实现思路：

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

根据transfORM: translateX进行左侧切换效果的实现（具体实现CSS如下），实现非滚动的点击切换效果，结合swiper进行修改。

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);" 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);" 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);" 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);" 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);" 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);" class="timeline-content">
          <div class="timeline-year">
            <span>2014</span>
          </div>
        </a>
        <div class="xians"></div>
      </div>
    </div>
  </div>
  <ul class="event_list">
    <div>
      <h4 id="2012">2019</h4>
      <img src="./img/lh.jpg" alt="">
    </div>
    <div style="display: none;">
      <h4 id="2012">2018</h4>
      <img src="./img/lhls.jpg" alt="">
    </div>
    <div style="display: none;">
      <h4 id="2011">2017</h4>
      <img src="./img/lkss.jpg" alt="">
    </div>
    <div style="display: none;">
      <h4 id="2011">2016</h4>
      <img src="./img/luhu.jpg" alt="">
    </div>
    <div style="display: none;">
      <h4 id="2011">2015</h4>
      <img src="./img/luhuwhite.jpg" alt="">
    </div>
    <div style="display: none;">
      <h4 id="2011">2014</h4>
      <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">

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 {
  
}
 
.main-timeline .timeline {
  width: 4%;
  
  margin: 0 50px 0 0;
  float: left;
  position: relative;
}
 
.main-timeline .timeline-content {
  
  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;
  
}
 
.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;
 
  
  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>
swiper使用方法

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

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

2.html内容。

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
	</div>
	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>
	
	<!-- 如果需要导航按钮 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	
	<!-- 如果需要滚动条 -->
	<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

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

.swiper-container {
    width: 600px;
    height: 300px;
}

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

<script>
	var mySwiper = new Swiper('.swiper-container', {
		direction: 'vertical', // 垂直切换选项
		loop: true, // 循环模式选项

		// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
		},

		// 如果需要前进后退按钮
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},

		// 如果需要滚动条
		scrollbar: {
			el: '.swiper-scrollbar',
		},
	})
</script>

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

如果作为CommonJs 或ES 模块引入

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', {  });
 
//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', {  });

关于“怎么用jquery+swiper实现时间轴tab滑动切换显示效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网html频道，小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: 怎么用jquery+swiper实现时间轴tab滑动切换显示效果

本文链接: https://lsjlt.com/news/98735.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么用jquery+swiper实现时间轴tab滑动切换显示效果
    这篇文章主要介绍“怎么用jquery+swiper实现时间轴tab滑动切换显示效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用jquery+swiper实现...
    99+
    2024-04-02
  • jquery+swiper组件实现时间轴滑动年份tab切换效果
    实现效果： 实现代码：需要配合swiper组件使用 Swiper基础演示地址： https://www.swiper.com.cn/demo/index.html HTML: ...
    99+
    2024-04-02
  • jquery+swiper组件如何实现时间轴滑动年份tab切换效果
    这篇文章主要讲解了“jquery+swiper组件如何实现时间轴滑动年份tab切换效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery+swiper组件如何实现时间轴滑动年份tab...
    99+
    2023-06-21
  • jQuery实现类似滑动门切换效果的层切换
    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3...
    99+
    2022-11-15
    滑动门 层切换
  • 怎么用vue实现滚动tab跟随切换效果
    这篇文章主要介绍“怎么用vue实现滚动tab跟随切换效果”，在日常操作中，相信很多人在怎么用vue实现滚动tab跟随切换效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用vue实现滚动tab跟随切换效果...
    99+
    2023-07-04
  • css中怎么实现tab切换效果
    今天就跟大家聊聊有关css中怎么实现tab切换效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。 其实是使用锚点作为标...
    99+
    2024-04-02
  • angularjs怎么实现Tab栏切换效果
    这篇文章主要讲解了“angularjs怎么实现Tab栏切换效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“angularjs怎么实现Tab栏切换效果”吧！如图所示选中后提交的实例代码：&l...
    99+
    2023-06-29
  • android左右滑动切换效果怎么实现
    在Android中，可以通过使用ViewPager组件来实现左右滑动切换效果。 首先，在XML布局文件中添加一个ViewPager组...
    99+
    2023-10-23
    android
  • HTML5+CSS3怎么实现灵动的动画TAB切换效果
    这篇文章将为大家详细讲解有关HTML5+CSS3怎么实现灵动的动画TAB切换效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实...
    99+
    2023-06-08
  • CSS怎么实现Tab切换标签效果
    这篇文章主要讲解了“CSS怎么实现Tab切换标签效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么实现Tab切换标签效果”吧！本文实例讲述了纯CS...
    99+
    2024-04-02
  • vue使用动态组件实现TAB切换效果
    目录问题描述 什么是vue的动态组件 应用场景描述 实现步骤 第一步（新建组件并引入注册） 第二步（布局，上面放tab点击的标签，下面放组件呈现对应内容）第三步（写好上面的tab点击...
    99+
    2024-04-02
  • Android中怎么使用ViewPager2实现页面滑动切换效果
    这篇“Android中怎么使用ViewPager2实现页面滑动切换效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Andr...
    99+
    2023-06-29
  • 如何利用JS实现时间轴动画效果
    目录css动画什么是时间轴动画？动画对象动画函数思考总结css动画 在前端开发中，一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ，如： .div1 { ...
    99+
    2024-04-02
  • 使用CSS3怎么实现一个时间轴效果
    这篇文章将为大家详细讲解有关使用CSS3怎么实现一个时间轴效果 ，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用...
    99+
    2023-06-08
  • js如何实现动态显示时间效果
    这篇文章给大家分享的是有关js如何实现动态显示时间效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。示例代码如下：<!DOCTYPE HTML> ...
    99+
    2024-04-02
  • javascript+jQuery如何实现360开机时间显示效果
    小编给大家分享一下javascript+jQuery如何实现360开机时间显示效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！实现效果：实现原理：　　给关闭按钮绑定点击事件，点击以后触发...
    99+
    2024-04-02
  • jquery选项卡切换效果怎么实现
    要实现jQuery选项卡切换效果，可以按照以下步骤进行操作：1. 创建HTML结构，使用`ul`和`li`元素创建选项卡的导航栏，使...
    99+
    2023-08-15
    jquery
  • vue使用动态组件实现TAB切换效果完整实例
    目录一、方法1：使用Vant组件库的tab组件二、 方法2：手动创建tab切换效果三、完整代码总结一、方法1：使用Vant组件库的tab组件 Vant 2 - Mobile UI C...
    99+
    2023-05-20
    vue tab切换组件 vue tab切换 vue动态组件切换
  • Android应用中利用ViewPager实现多页面滑动切换效果示例
    1、添加android support包 因为上面的几个类都是在android support包中才提供，我们先添加包。 在Eclipse->Window->And...
    99+
    2022-06-06
    示例 viewpager Android
  • Bootstrap怎么实现标签页内容切换显示效果
    这篇文章主要介绍了Bootstrap怎么实现标签页内容切换显示效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：<!DOCT...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作