导航栏保持居中并使用swiper作为轮播图进行背景轮播背景

如图：

1.首先使用swiper，需要到这个网址https://www.swiper.com.cn/demo/index.html选择你想使用的轮播样式，接下来引入一些文件，可以到这个网址参考api下载必要的文件。
2.

//index.html
<!DOCTYPE html>
<html lang="zh"><head><meta http-equiv="X-UA-Compatible" content="edge" /><meta charset="utf-8" /><title>轮播图</title><link rel="shortcut icon" href="../img/favicon.png"><meta name="keywords" content="" /><meta name="description" content="" /><link rel="stylesheet" href="../css/public.css"><link rel="stylesheet" href="../Swiper-3.4.2/dist/css/swiper.css"><script src="../Swiper-3.4.2/dist/js/swiper.js"></script><style>.swiper-container {width: 100%;height: 820px;}.swiper-slide {text-align: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;background-size: cover;background-position: center;background-repeat: no-repeat;}.swiper-pagination-bullet {width: 15px;//小圆点的宽height: 15px;border: 2px solid #fff;}.swiper-pagination-bullet-active {background: #fff;//选中小圆点的背景色}</style>
</head><body><div style="width: 100%; margin: 0 auto;"><div class="top"><div class="topNav"><div class="clearFix topNavLogo"><a><img src="../img/logo.png"></a></div><div class="clearFix topNavContent"><ul><li><a href="../html/index.html">首页</a></li><li><a href="">党群工作</a></li><li><a href="">关于陆港</a></li><li><a href="">新闻中心</a></li><li><a href="">供应链</a></li><li><a href="">园区招商</a></li><li><a href="">物流服务</a></li><li><a href="">钢材市场</a></li><li><a href="">人力资源</a></li></ul></div></div></div></div><!-- 头部 --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" style="background-image:url(../img/index3.jpg);"></div><div class="swiper-slide" style="background-image:url(../img/index1.jpg);"></div></div><div class="swiper-pagination"></div></div><script>var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',paginationClickable: true,autoplay: 3000, //--每秒中轮播一次loop: true, //--可以让图片循环轮播autoplayDisableOnInteraction: false, //--在点击之后可以继续实现轮播});</script>
</body></html>

//public.css
* {margin: 0;padding: 0;
}a {text-decoration: none;
}ul {list-style: none;
}.clearFix::after {content: '';clear: both;display: block;
}.top {position: absolute;z-index: 99;text-align: center;left: 0;right: 0;}
.topNav {width: 1200px;height: 80px;margin: 0 auto;padding-top: 25px;
}.topNavLogo {float: left;
}.topNavLogo>img {height: 50px;width: 320px;
}.topNavContent {float: right;
}.topNavContent>ul>li {float: left;color: #fff;font-size: 16px;margin: 15px 10px;
}.topNavContent>ul>li a {color: #fff;
}.topNavContent>ul>li a:hover {color: #f8bb26;
}

导航栏保持居中并使用swiper作为轮播图进行背景轮播背景相关推荐

宽高自适应下的导航栏文本居中
导航栏是网页中必不可少的一部分,固定的宽高可以直接写给元素,但是不同的分辨率之下,可能会出现滚动条或者空白,所以就需要使用宽高自适应的方式,让导航栏更加灵活的适应网页. 例: 导航栏宽1000px ...
swiper轮播图切换指示点改变背景颜色
swiper 官方api文档:https://www.swiper.com.cn/api/index.html 如果有一个页面中需要引用多个Swiper,可以给每个容器加上ID或Class区分,但是需 ...
层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求在网上找了一堆都没有自己想要的最开始被 TaroUI和小程序自带的swiper困扰一直以为是swpier的升级版试了好久也没改造成功干脆自 ...
小程序点击tab导航栏滑动居中
图片 wxml: <scroll-view class="scroll-view_H"scroll-left="{{scroll_left}}"scrol ...
iOS11缩小界面导航栏与标签栏异常的问题
到底是在什么情况下出现怎么样的异常? 几个月之前自己尝试封装了一个仿QQ抽屉效果的轮子,相比较目前常见的抽屉框架优势还是比较明显的,用的人也慢慢的多起了来,现在基本已经稳定了.如果有兴趣可以打开?一行 ...
React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
IOS界面元素四栏（状态栏、导航栏、工具栏、TAB栏）设计规范
1 栏 1.1 状态栏状态栏展示于设备和当前环境相关的重要信息. 外观和行为:状态栏总是出现在屏幕顶部,包含网络连接.时间.电量等用户需要的信息在iPhone上,状态栏的颜色会变.而 ...
ios状态栏，导航栏，工具栏，tab栏的位置，附图
在iOS应用程序开发时,UIKit 框架提供了大量的UI元素共开发者使用.但开发者设计应用程序的用户界面时,一定要记得用户对于系统内置的那一套应用程序已经非常熟悉,所以开发者一定要正确的使用这些UI元 ...
CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...

导航栏保持居中并使用swiper作为轮播图进行背景轮播背景

导航栏保持居中并使用swiper作为轮播图进行背景轮播背景相关推荐

最新文章

热门文章