移动端如何用swiper实现导航栏效果
2024-08-28 08:17:26
我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能;而这个功能如果自己写的话会很麻烦,所以我在这推荐一下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>
这中方法我认为是非常简单的。希望对大家有用
最新文章
- 0.Win8.1,Win10,Windows Server 2012 安装 Net Framework 3.5
- 【荐】JavaScript编码风格
- 用于主题检测的临时日志(b2d5c7b3-e3f6-4b0f-bfa4-a08e923eda9b - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
- php操作oracle的方法类集全
- ASP + ACCESS 上传图片到数据库与将图片读出数据库显示之实现
- ecshop数据库表结构
- iphone iOS7恢复到iOS6教程
- nodejs实践-代码组织
- ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
- python各种运算优先级一览表
- BZOJ_3398_[Usaco2009 Feb]Bullcow 牡牛和牝牛_组合数学
- Na&#239;ve Media Player
- Oracle EBS 查看执行计划
- Python之argv简明详解
- 每个JavaScript工程师都应懂的33个概念
- 信息安全与Linux系统
- IntelliJ IDEA JRebel Maven Tomcat 实现热部署
- DIV+CSS IE6/IE7/IE8/FF兼容问题汇总
- 2018.10.12 NOIP模拟 棋盘问题(切比雪夫距离)
- Python2和Python3同时安装到Windows