需要用到的组件：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发Html代码：
2022
2021
2020
2019
2018
2017
2022
2021
2020
2019
2018
2017
CSS代码：
.page{ width: 100%;}.main-timeline{ font-family: Arial, Helvetica, sans-serif; width: 200px; position: relative; float: left;}.main-timeline:after{ content: ''; display: block; clear: both;}.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; /* 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: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;}.show_timeline { width: 3px; height: 100%; background: #a7a7a5; position: absolute; left: 82px; z-index: -1;}效果图：
