首页 > 代码库 > 在移动端如何用swiper实现导航栏效果

在移动端如何用swiper实现导航栏效果

2024-10-18 11:30:39   211人阅读

　　我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能；而这个功能如果自己写的话会很麻烦，所以我在这推荐一下swiper这个插件。

　　其实swiper中的官网中也有这种功能的实现，但是我认为是有点麻烦的。而我在网上也没找到。所以我通过查找和研究弄出了这种方法（也可能有人这么用了）；

　　话不多说，上代码

　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
        <style type="text/css">
            .swiper-container{/*把主要的框写好*/
                width:400px;
                height:400px;
                border:1px solid #aaa;
            }
            .swiper-slide{/*轮播的内容*/
                width:100%;
                height:100%;
                text-align: center;
                line-height: 400px;
            }
            .swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/
                border-bottom: 1px solid #aaa;
                width:100%;
                height:40px;
                display: flex;
                top:0;
            }
            .swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/
                color:#808080;
            }
            .swiper-pagination-bullet{/*这个是小圆点的样式*/
                background:transparent;/*背景色设置为需要的背景*/
                -webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/
                text-align: center;
                line-height: 40px;
                border-radius: 0;/*把小圆点重新设置为矩形*/
                height: 40px;
                color:#000000;
            }
            .swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/
                content:"Slide 1";/*所插入的内容*/
            }
            .swiper-pagination-bullet:nth-child(2):before{
                content:"Slide 2";
            }
            .swiper-pagination-bullet:nth-child(3):before{
                content:"Slide 3";
            }
            .swiper-pagination-bullet:nth-child(4):before{
                content:"Slide 4";
            }
            .swiper-pagination-bullet:nth-child(5):before{
                content:"Slide 5";
            }
        </style>
    </head>
    <body>
        <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 class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </body>
</html>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    window.onload = function(){
        var swiper = new Swiper(".swiper-container", {
            pagination: ".swiper-pagination",//显示小圆点
            autoplay:2000,                     //轮播毫秒数
            loop:true,                         //可以重复轮播，默认方式是false
            paginationClickable: true,         //值为真时，当单击指示器时会执行过渡动画到目标slide
            speed:300,                         //slides滑动动画之间的持续时间
            autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay
//            mode:‘horizontal‘,                 //slides滑动方式，水平或垂直
        });
    }
</script>

　　这中方法我认为是非常简单的。希望对大家有用

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/swiper.min.css"/><style type="text/css">.swiper-container{/*把主要的框写好*/width:400px;height:400px;border:1px solid #aaa;}.swiper-slide{/*轮播的内容*/width:100%;height:100%;text-align: center;line-height: 400px;}.swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/border-bottom: 1px solid #aaa;width:100%;height:40px;display: flex;top:0;}.swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/color:#808080;}.swiper-pagination-bullet{/*这个是小圆点的样式*/background:transparent;/*背景色设置为需要的背景*/-webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/text-align: center;line-height: 40px;border-radius: 0;/*把小圆点重新设置为矩形*/height: 40px;color:#000000;}.swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/content:"Slide 1";/*所插入的内容*/}.swiper-pagination-bullet:nth-child(2):before{content:"Slide 2";}.swiper-pagination-bullet:nth-child(3):before{content:"Slide 3";}.swiper-pagination-bullet:nth-child(4):before{content:"Slide 4";}.swiper-pagination-bullet:nth-child(5):before{content:"Slide 5";}</style></head><body><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 class="swiper-slide">Slide 4</div>            <div class="swiper-slide">Slide 5</div>        </div>        <!-- Add Pagination -->        <div class="swiper-pagination"></div>    </div></body></html><script src="http://www.mamicode.com/js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload = function(){    var swiper = new Swiper(".swiper-container", {        pagination: ".swiper-pagination",//显示小圆点        autoplay:2000, //轮播毫秒数        loop:true, //可以重复轮播，默认方式是false        paginationClickable: true, //值为真时，当单击指示器时会执行过渡动画到目标slide        speed:300, //slides滑动动画之间的持续时间        autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay//        mode:‘horizontal‘, //slides滑动方式，水平或垂直    });}</script>

在移动端如何用swiper实现导航栏效果


联系
我们