首页 > 其他 > 详细

swiper tab实例

时间:2019-05-14 16:12:55      阅读:122      评论:0      收藏:0      [点我收藏+]

虽然我是个精致的猪猪女孩

但这个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 为固定值也是同样的道理!

有问题请留言哦!

swiper tab实例

原文:https://www.cnblogs.com/GXQi/p/10862638.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!