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

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

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

　　话不多说，上代码

　 swiper的js包css包下链接地址 :  https://github.com/Clearlovesky/swiper3.4.2

<!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>

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

移动端如何用swiper实现导航栏效果的更多相关文章

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

    我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官网中也有这种功能的实现,但是我认为是有点麻 ...

  2. uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据

    h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...

  3. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  4. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  5. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  6. Android仅2步实现 滚粗 汉堡导航栏效果~ 全新底部导航交互(滑动隐藏)

    本文同步自wing的地方酒馆 布吉岛大家有木有看这一篇文章,再见,汉堡菜单,我们有了新的 Android 交互设计方案 本库下载地址:https://github.com/githubwing/Bye ...

  7. html实现导航栏效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  9. html表单——使用frameset写一个导航栏效果

    主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

随机推荐

  1. C# SemaphoreSlim 实现

    当多个任务或线程并行运行时,难以避免的对某些有限的资源进行并发的访问.可以考虑使用信号量来进行这方面的控制(System.Threading.Semaphore)是表示一个Windows内核的信号量对 ...

  2. Android、iOS、和Web如何做灰度发布？

        主要参考了: https://www.zhihu.com/question/21714205     https://www.zhihu.com/question/28296375  一.概述 ...

  3. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  4. BIM轻量化助力建筑业迈向BIM+时代

    多年以来,BIM一直是曲高和寡,仅仅在建筑圈内孤芳自赏.我们花那么多心思建了那么多BIM模型,如果仅仅在建筑圈内使用,未免暴殄天物.如何充分发掘BIM的价值,让更多的受众从BIM中受益,这是我们亟待解 ...

  5. eclipse项目名称后面括号里的名称和项目名称不一样

    解决方案: 1:项目右键-属性(Properties)-Web Project Setting, 改名称注意:这个名字将成为你在浏览器访问的路径 2:打开项目目录的.setting文件夹,随便一个文本 ...

  6. 【C++】C++中assert和ENDEGU预处理语句

    assert 断言语句是C++中的一种预处理宏语句,它能在程序运行时根据否定条件中断程序. C++中的assert()函数可以实现断言功能,在使用assert函数之前应该先引入<cassert& ...

  7. Mac NPM 配置

    1.NPM 简介 NPM(node package manager),通常称为 node 包管理器,是目前世界上最大的开源库生态系统.使用 NPM 可以对 node 包进行安装.卸载.更新.查看.搜索 ...

  8. CentOS 7.2编译安装Tengine

    Tengine官网上有个非常简单的教程,中间并未涉及到一些常用的设置,所以仅供参考.一下午为本人的安装步骤及过程. 配置firewalld,iptables,关闭SELINUX 1.安装必要的编译环境 ...

  9. Atitit s2018.5 s5 doc list on com pc.docx  Acc 112237553.docx Acc baidu netdisk.docx Acc csdn 18821766710 attilax main num.docx Atiitt put post 工具 开发工具dev tool test.docx Atiitt 腾讯图像分类相册管家.docx

    Atitit s2018.5 s5  doc list on com pc.docx  Acc  112237553.docx Acc baidu netdisk.docx Acc csdn 1882 ...

  10. [sh]top添加到crontab不生效问题解决

    今天遇到个小问题 top结果赋值给变量,放到文件做处理, 但是不生效问题. https://www.phpbulo.com/archives/509.html cat top.sh NAME=&quo ...