在移动端如何用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. mac下host配置 + mac修改了环境变量却不生效：zsh: command not found: xxx

    https://blog.csdn.net/hlllmr1314/article/details/52228672 在/etc/profile中配置了go语言环境变量: export GOROOT=/ ...

  2. CDH下集成spark2.2.0与kafka（四十一）：在spark+kafka流处理程序中抛出错误java.lang.NoSuchMethodError: org.apache.kafka.clients.consumer.KafkaConsumer.subscribe(Ljava/util/Collection;)V

    错误信息 19/01/15 19:36:40 WARN consumer.ConsumerConfig: The configuration max.poll.records = 1 was supp ...

  3. 每天一个linux命令:chgrp

    1.命令简介         chgrp(Change group) 用来将每个指定文件的所属组设置为指定值.如果使用 --reference,则将每个文件的所属组设置为与指定参考文件相同. 2.用法 ...

  4. VTK使用矢量数据弯曲几何体

    vtkWarpVector is a filter that modifies point coordinates by moving points along vector times the sc ...

  5. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  6. 网络协议学习（2）---IP地址

    一.IPv4地址 IPv4地址为32bit地址,分为5类(ABCDE,这里不讨论特殊用途的D和E类). 通常我们八位一看,写成4个部分,例如:00000000 00000000 00000000 00 ...

  7. Spark 精品文章转载（目录）

    学习 Spark 中,别人整理不错的文章,转载至本博客,方便自己学习,并按照不同的模块归档整理.每个文章作者能力不同,写文章所处的时间点不同,可能会略有差异,在阅读的同时,注意当时的文章的内容是否已经 ...

  8. apache中如何调用CGI脚本

    参考: http://www.jdon.com/idea/cgi.htm http://www.jb51.net/article/49069.htm 在Apache在配置对CGI的支持 LoadMod ...

  9. Cmake find_package 需要指定具体的so

    需要使用cmake的find_package将boost库添加到项目中,通过cmake --help-module FindBoost 可以查看cmake引入Boost的帮助信息: 可以看到,Boot ...

  10. 深度学习卷积网络中反卷积/转置卷积的理解 transposed conv/deconv

    搞明白了卷积网络中所谓deconv到底是个什么东西后,不写下来怕又忘记,根据参考资料,加上我自己的理解,记录在这篇博客里. 先来规范表达 为了方便理解,本文出现的举例情况都是2D矩阵卷积,卷积输入和核 ...