<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>swiper和tab相結合</title> <link href="http://files.cnblogs.com/files/heyiming/swiper3.3.1.min.css" rel="stylesheet" type="text/css"> <script src="files/heyiming/jquery-1.8.0.min.js"></script> <script src="files.cnblogs.com/files/heyiming/swiper3.3.1.min.js"></script> <body> <style type="text/css"> #swiper-tab .swiper-slide{ line-height:2 !important; color:#666 !important; font-size:14px !important; background:#eee !important; } #swiper-tab .active-nav{ background:red !important; } /*tabs文字居中*/ #swiper-tab{ text-align: center; } /*給con部分加上一個背景色*/ #swiper-con{ background: yellow; height:300px; } </style> <!--swiper-tab區域--> <div class="swiper-container swiper-container-horizontal" id="swiper-tab" style="width:480px;"> <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-800px, 0px, 0px);"> <div class="swiper-slide" style="width: 160px;">版塊1</div> <div class="swiper-slide" style="width: 160px;">版塊2</div> <div class="swiper-slide" style="width: 160px;">版塊3</div> <div class="swiper-slide" style="width: 160px;">版塊4</div> <div class="swiper-slide swiper-slide-prev" style="width: 160px;">版塊5</div> <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 160px;">版塊6</div> <div class="swiper-slide swiper-slide-visible swiper-slide-next" style="width: 160px;">版塊7</div> <div class="swiper-slide active-nav swiper-slide-visible" style="width: 160px;">版塊8</div> </div> </div> <!--swiper-tab區域--> <!--swiper-con區域--> <div class="swiper-container swiper-container-horizontal" id="swiper-con" style="width:480px;"> <div class="swiper-wrapper" style="transform: translate3d(-3360px, 0px, 0px); transition-duration: 0ms;"> <div class="swiper-slide blue-slide" style="width: 480px;">slider1</div> <div class="swiper-slide red-slide" style="width: 480px;">slider2</div> <div class="swiper-slide orange-slide" style="width: 480px;">slider3</div> <div class="swiper-slide blue-slide" style="width: 480px;">slider4</div> <div class="swiper-slide red-slide" style="width: 480px;">slider5</div> <div class="swiper-slide orange-slide" style="width: 480px;">slider6</div> <div class="swiper-slide blue-slide swiper-slide-prev" style="width: 480px;">slider7</div> <div class="swiper-slide red-slide swiper-slide-active" style="width: 480px;">slider8</div> </div> </div> <!--swiper-con區域--> <script> var mySwiper2 = new Swiper('#swiper-tab',{ watchSlidesProgress : true,//開啟這個參數來計算每個slide的progress(進度) 對於slide的progress屬性，活動的那個為0，其他的依次減1。例：如果一共有6個slide，活動的是第三個，
從第一個到第六個的progress屬性分別是：2、1、0、-1、-2、-3。對於swiper的progress屬性，活動的slide在最左（上）邊時為0，活動的slide在最右（下）邊時為1，其他情況平分。例：有6個slide，
當活動的是第三個時swiper的progress屬性是0.4，當活動的是第五個時swiper的progress屬性是0.8。swiper的progress其實就是wrapper的translate值的百分值，與activeIndex等屬性不同，
progress是隨着swiper的切換而不停的變化，而不是在某個時間點突變。 watchSlidesVisibility : true,//如果開啟了watchSlidesVisibility，則會在每個可見slide增加一個classname，默認為'swiper-slide-visible' slidesPerView : 3,//將tabs塊兒平均分成幾份 /*點擊了上面的滑塊時，下面的內容區也跟着變化 若去掉后，拖動下面上面可繼續移動*/ onTap: function(){ mySwiper3.slideTo( mySwiper2.clickedIndex) } }) var mySwiper3 = new Swiper('#swiper-con',{ onSlideChangeStart: function(){ updateNavPosition() } }) function updateNavPosition(){ //默認哪一塊是被選中的狀態 $('#swiper-tab .active-nav').removeClass('active-nav') var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav'); if (!activeNav.hasClass('swiper-slide-visible')) { console.log(1); if (activeNav.index()>mySwiper2.activeIndex) { console.log(2); var thumbsPerNav = Math.floor(mySwiper2.width/activeNav.width())-1 mySwiper2.slideTo(activeNav.index()-thumbsPerNav) } else { console.log(3); mySwiper2.slideTo(activeNav.index()) } } } </script> <!--content--> </body> </html>
效果圖：
