站長資訊網
        最全最豐富的資訊網站

        jquery+swiper實現時間軸tab滑動切換顯示效果

        根據時間軸進行tab頁面內容切換?下面本篇文章給大家介紹一下jquery時間軸tab切換效果實現結合swiper實現滑動顯示效果的方法,希望對大家有所幫助!

        jquery+swiper實現時間軸tab滑動切換顯示效果

        前端(vue)入門到精通課程:進入學習

        需求:根據時間軸進行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:

          <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>       <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">

        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>
        swiper使用方法

        1.首先加載插件,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件,不同Swiper版本用到的文件名略有不同??上螺dSwiper文件或使用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視頻教程、web前端視頻】

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 精品国产第一国产综合精品 | 91久久精品国产91性色也| 欧美XXXX黑人又粗又长精品| 精品无人区麻豆乱码1区2区| 亚洲精品无码不卡在线播放HE| 国产亚洲精品国看不卡| 欧美精品国产日韩综合在线| 97精品国产91久久久久久| 日韩精品无码一区二区中文字幕 | 久久精品国产一区二区| 欧洲精品视频在线观看| 国产精品看高国产精品不卡| 一本一本久久a久久综合精品蜜桃 一本一道精品欧美中文字幕 | 2022精品天堂在线视频| 亚洲av无码国产精品色在线看不卡 | 国产成人精品日本亚洲18图| 亚洲国产另类久久久精品黑人| 精品亚洲视频在线观看| 97国产视频精品| 亚洲精品在线观看视频| 精品亚洲综合久久中文字幕| 国产精品天天看天天狠| 人妻AV一区二区三区精品 | 国产福利电影一区二区三区久久久久成人精品综合 | 亚洲精品国产自在久久| 日韩蜜芽精品视频在线观看| 久久综合精品国产一区二区三区| 国产成人精品一区二三区在线观看| 四虎国产精品免费观看| 欧美久久精品一级c片片| 先锋影音国产精品| 欧美精品香蕉在线观看网| 93精91精品国产综合久久香蕉 | 精品日产一区二区三区手机| 国内精品一级毛片免费看 | 国产精品久线在线观看| 国产精品国色综合久久| 国产成人精品无码片区在线观看| 国产精品一区二区久久不卡 | 免费人欧美日韩在线精品| 人妻少妇看A偷人无码精品|