简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.

青灯夜游
풀어 주다： 2022-09-09 10:12:05
앞으로
2759명이 탐색했습니다.

타임라인에 따라 탭 페이지 콘텐츠를 전환하시겠습니까? 다음 글에서는 스와이퍼와 결합된 jquery타임라인 탭 전환 효과를 구현하여 슬라이딩 디스플레이 효과를 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.

요구 사항: 타임라인에 따라 탭 페이지 콘텐츠 전환(보고 선택하려면 타임라인을 스와이프해야 함)

구현 아이디어:

스와이프 플러그인과 결합하여 슬라이딩 디스플레이 구현 effect

변환에 따른 왼쪽:translateX 사이드 전환 효과 구현(CSS의 구체적인 구현은 다음과 같습니다), 비스크롤 클릭 전환 효과를 구현하고, 스와이퍼와 결합하여 수정합니다. [관련 튜토리얼 권장 사항: jQuery 튜토리얼]

구현 효과:

jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.

구현 코드: swiper 구성 요소와 함께 사용해야 합니다. 왼쪽 탐색은 html 구조를 기반으로 생성된 타임라인 효과입니다. css3 코드 효과는 http://www.htmleaf.com/css3/ui-design/201911275850.html

Swiper 기본 데모 주소: https://www.swiper.com.cn/demo/index.html

에서 나옵니다.

HTML :

  <div>
    <div>
      <div>
        <a>
          <div>
            <span>2019</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2018</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2017</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2016</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2015</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2014</span>
          </div>
        </a>
        <div></div>
      </div>
    </div>
  </div>
  
로그인 후 복사
        
          

    2019

          jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.     
        
          

    2018

          jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.     
        
          

    2017

          jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.     
        
          

    2016

          jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.     
        
          

    2015

          jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.     
        
          

    2014

          jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.     
      
  

所需外部链接文件：

<script></script>  
<script></script>  
<link>
로그인 후 복사

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(&#39;fd-active-line&#39;).siblings().removeClass(&#39;fd-active-line&#39;)
          $(this).parent().parent().siblings(&#39;.event_list&#39;).children().eq(index).show().siblings().hide()
        }
      })
      var swiper = new Swiper(&#39;.swiper-container&#39;, {
        slidesPerView: 4,
        direction: &#39;vertical&#39;,
        navigation: {
          nextEl: &#39;.swiper-button-next&#39;,
          prevEl: &#39;.swiper-button-prev&#39;,
        },
        on: {
          resize: function () {
            swiper.changeDirection(getDirection());
          }
        }
      });
    });
  </script>
로그인 후 복사
swiper 사용 방법

1 먼저 필요한 파일은 swiper-bundle.min입니다. Node.js와 swiper-bundle .min.css 파일은 Swiper 버전에 따라 사용되는 파일 이름이 약간 다릅니다. Swiper 파일을 다운로드하거나 CDN을 사용할 수 있습니다. 

<link>
<script></script>
로그인 후 복사

2.HTML 콘텐츠. 

<div>
	<div>
		<div>Slide 1</div>
		<div>Slide 2</div>
		<div>Slide 3</div>
	</div>
	<!-- 如果需要分页器 -->
	<div></div>
	
	<!-- 如果需要导航按钮 -->
	<div></div>
	<div></div>
	
	<!-- 如果需要滚动条 -->
	<div></div>
</div>
导航等组件可以放在container之外
로그인 후 복사

3. Swiper의 크기를 정의하고 싶을 수도 있지만 물론 그렇지 않습니다. 

.swiper-container {
    width: 600px;
    height: 300px;
}
로그인 후 복사

4. 스와이프를 초기화하세요. Swiper6 이전의 기본 컨테이너는 '.swiper-container'이고 Swiper7 이후의 기본 컨테이너는 '.swiper'입니다. 

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

		// 如果需要分页器
		pagination: {
			el: &#39;.swiper-pagination&#39;,
		},

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

		// 如果需要滚动条
		scrollbar: {
			el: &#39;.swiper-scrollbar&#39;,
		},
	})
</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 동영상 튜토리얼, 웹 프론트엔드 동영상]

위 내용은 jquery+swiper는 타임라인 탭 슬라이딩 전환 표시 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
jquery swiper
원천：cnblogs.com
이전 기사：각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. 다음 기사：JavaScript의 null 종합 분석
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1639
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1796
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1533
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1440
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1487
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！