普通注册 - 普通登录
开源之家-免费素材_软件_模板_源码下载-更快的站长下载站

开源之家-免费素材_软件_模板_源码下载-更快的站长下载站

swiper移动端导航栏滑动切换选项卡代码

时间:2019-11-29 14:09 [特效源码] 作者:开源之家测试提供 浏览: 已下载:205次

点击下载 已下载:205 次  运行环境:HTML  软件大小: 104 KB  提取码:   推荐VPS:九零云

swiper移动端导航栏滑动切换选项卡代码

特效描述:swiper 移动端导航栏 滑动切换选项卡,swiper.js制作手机移动端导航滑动tab选项卡切换代码

代码结构

1. 引入CSS

1
2
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/Swiper/3.3.13.3.1/css/swiper.min.css">
<link rel="stylesheet" href="css/swiper-3.2.7.min.css" />

2. 引入JS

1
2
3
<script src="js/jquery.min.js"></script>
<script src="//cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>

3. HTML代码

<div class="container">
            <div class="swiper-container swiper1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide selected">推荐</div>
                    <div class="swiper-slide">菜单 2</div>
                    <div class="swiper-slide">菜单 3</div>
                    <div class="swiper-slide">菜单 4</div>
                    <div class="swiper-slide">菜单 5</div>
                    <div class="swiper-slide">菜单 6</div>
                    <div class="swiper-slide">菜单 7</div>
                    <div class="swiper-slide">菜单 8</div>
                    <div class="swiper-slide">菜单 9</div>
                    <div class="swiper-slide">菜单 10</div>
                </div>
            </div>
            <!-- swiper2 -->
            <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-no-swiping">
                        <div style="width: 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div>
                    </div>
                    <div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222</div>
                    <div class="swiper-slide swiper-no-swiping">内容 213213123</div>
                    <div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
                    <div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
                    <div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
                    <div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
                    <div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
                    <div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
                    <div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                function setCurrentSlide(ele, index) {
                    $(".swiper1 .swiper-slide").removeClass("selected");
                    ele.addClass("selected");
                    //swiper1.initialSlide=index;
                }
                var swiper1 = new Swiper('.swiper1', {
//                  设置slider容器能够同时显示的slides数量(carousel模式)。
//                  可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//                  loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
                    slidesPerView: 5.5,
                    paginationClickable: true,//此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
                    spaceBetween: 10,//slide之间的距离(单位px)。
                    freeMode: true,//默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合。
                    loop: false,//是否可循环
                    onTab: function(swiper) {
                        var n = swiper1.clickedIndex;
                    }
                });
                swiper1.slides.each(function(index, val) {
                    var ele = $(this);
                    ele.on("click", function() {
                        setCurrentSlide(ele, index);
                        swiper2.slideTo(index, 500, false);
                        //mySwiper.initialSlide=index;
                    });
                });
                var swiper2 = new Swiper('.swiper2', {
                    //freeModeSticky  设置为true 滑动会自动贴合  
                    direction: 'horizontal',//Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。
                    loop: false,
//                  effect : 'fade',//淡入
                    //effect : 'cube',//方块
                    //effect : 'coverflow',//3D流
//                  effect : 'flip',//3D翻转
                    autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。
                    onSlideChangeEnd: function(swiper) {  //回调函数,swiper从一个slide过渡到另一个slide结束时执行。
                        var n = swiper.activeIndex;
                        setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                        swiper1.slideTo(n, 500, false);
                    }
                });
            });
        </script>


点击下载 已下载:205 次  运行环境:HTML  软件大小: 104 KB  提取码:   推荐VPS:九零云

转载请注明来源:swiper移动端导航栏滑动切换选项卡代码

本文永久链接地址:https://www.enboo.cn/texiaoyuanma/17459.html


下载说明:
●推荐使用2345加速浏览器、谷歌等各大浏览器直接点击下载地址下载,请勿复制本站下载地址到别处下载,推荐使用2345好压解压文件;
●本站提供的源码通过 QQ电脑管家、360安全卫士 等软件检测;安全绿色无病毒请放心下载!
●本站提供的源码经过测试,有前台及后台管理界面演示图;请自行下载学习研究,请勿用于非法用途,如用于非法用途,责任请自负,与本站无关!
版权声明:
○下载本站资源学习研究的默认同意本站的【版权声明本站提供的资源若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。