swiper tab实例
虽然我是个精致的猪猪女孩
但这个demo写的确实很丑
只为说明问题！！！忽略样式
上代码：
<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; } #swiper-tab .swiper-slide { width: auto; cursor: pointer; } #swiper-tab .swiper-slide > div { padding: 0 50px; } /*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"> <div class="swiper-slide active-nav"><div>版块1</div></div> <div class="swiper-slide"><div>版块2</div></div> <div class="swiper-slide"><div>版块3</div></div> <div class="swiper-slide"><div>版块4</div></div> <div class="swiper-slide"><div>版块5</div></div> <div class="swiper-slide"><div>版块6</div></div> <div class="swiper-slide"><div>版块7</div></div> <div class="swiper-slide"><div>版块8</div></div> <div class="swiper-slide"><div>版块9</div></div> </div> </div> <!--swiper-tab区域--> <!--swiper-con区域--> <div class="swiper-container swiper-container-horizontal" id="swiper-con" style="width:480px;"> <div class="swiper-wrapper"> <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" style="width: 480px;">slider7</div> <div class="swiper-slide red-slide" style="width: 480px;">slider8</div> <div class="swiper-slide red-slide" style="width: 480px;">slider9</div> </div> <div class="swiper-button-next" id="next"></div> <div class="swiper-button-prev" id="prev"></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 : 'auto',//将tabs块儿平均分成几份 preventClicks : false, on:{ click:function(){ $('#swiper-tab .swiper-slide').removeClass('active-nav') $('#swiper-tab .swiper-slide').eq(mySwiper2.clickedIndex).addClass('active-nav'); //alert(mySwiper2.clickedIndex); mySwiper3.slideToLoop(mySwiper2.clickedIndex); } } }) var mySwiper3 = new Swiper('#swiper-con',{ navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) var prevIndex = 0, currentIndex = 0; mySwiper3.on('slideChangeTransitionEnd', function () { //默认哪一块是被选中的状态 $('#swiper-tab .swiper-slide').removeClass('active-nav'); //移除所有active-nav $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav'); //给当前tab加active-nav //var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav'); var len = $('#swiper-tab .swiper-slide.swiper-slide-visible').length, //获取可视区域内标签的个数 totalWidth = 0, //定义可视区域内标签个数对应的宽度总和 tabWidth = $('#swiper-tab').width(); //定义可视区域的宽度 for(var i = 0; i < len; i++) { totalWidth += $('#swiper-tab .swiper-slide.swiper-slide-visible').eq(i).width(); //赋值 } prevIndex = currentIndex; //把前一个标签的下表赋值给prevIndex currentIndex = mySwiper3.activeIndex; //把当前tab的下表赋值给currentIndex if(prevIndex < currentIndex) { mySwiper2.slideNext(); } else { mySwiper2.slidePrev(); } }); </script> <!--content--> </body>
效果如下：
该示例针对slidesPerView : 'auto'的情况，slidesPerView 为固定值也是同样的道理！
有问题请留言哦！
