实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下：
直接上代码了：
说明：轮播图基于swiper.js，自行下载。css在最后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/logo.ico">
<link rel="stylesheet" href="js/swiper/swiper.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/swiper/swiper.jquery.min.js"></script>
<title>云蚂客小程序</title>
</head>
<body>
<header class="head">
<nav>
<span class="nav_logo"></span>
<h1>云蚂客首页</h1>
<button class="nav_btn"></button>
</nav>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide banner_bg1"><div class="banner_txt1">11</div></div>
<div class="swiper-slide banner_bg2"><div class="banner_txt2">22</div></div>
<div class="swiper-slide banner_bg3"><div class="banner_txt3">33</div></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</header> <!-- 配置 Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
//pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade'
});
</script>
<script>
//使div中的文字段落始终垂直居中
function textVerCenter(obj){
var parHeight = $(obj).parent().height(); //获取父级高度
var objHeight = $(obj).height(); //获取自身高度
$(obj).css({
'position':'absolute',
'width':'100%',
'height':'auto',
'textAlign':'center',
'top':(parseInt(parHeight)-parseInt(objHeight))/2+'px',
});
} $(function(){
//控制banner全屏高度，并且文字内容垂直居中
var screenHeight = window.screen.availHeight
$(".head").height(screenHeight);
textVerCenter(".banner_txt1"); //文字居中
textVerCenter(".banner_txt2"); //文字居中
textVerCenter(".banner_txt3"); //文字居中 })
</script>
</body>
</html>
css:
@charset "utf-8";
/*CSS Reset*/
/*"微软雅黑","\5FAE\8F6F\96C5\9ED1","Microsoft YaHei"
"黑体","\9ED1\4F53"
"新宋体","\65B0\5B8B\4F53"
"宋体","\5B8B\4F53"
"幼圆" ,"YouYuan","\5E7C\5706"
*/
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-wrap:break-all}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{min-height:100%;background-color:#fff;-webkit-font-26oothing:antialiased;-moz-osx-font-26oothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{font-family:Arial,'微软雅黑',"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","simsun","\5B8B\4F53","宋体","\65B0\5B8B\4F53","新宋体";font-size:14px;color: #444;}
html,body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,hr,p,pre,span,strong,form,iframe,label,button,input,textarea,table,tr,th,td,fieldset,i{margin:;padding:;text-align:left}
dl,dd,ol,ul,li{list-style:none;list-style-type:none}
div{text-align:left;margin-left:auto;margin-right:auto}
i{display:inline-block;font-style:normal;font-weight:normal;text-align:center;vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:}
a,a:link,a:visited,a:hover,a:active,a:focus,input,button,textarea,select,optgroup,option,a:focus,input:focus,button:focus,textarea:focus,select:focus,optgroup:focus,option:focus,label,label:focus{outline:none;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-appearance: none;}
img{width:100%;border:;vertical-align:middle}a img,img{-ms-interpolation-mode:bicubic}
a,a:link,a:visited{color:#333333;cursor:pointer}
a:hover,a:active{text-decoration:underline}a.ie6:hover{zoom:}
button::-moz-focus-inner,input::-moz-focus-inner{padding:;border:}
input,button,textarea,select,optgroup,option{border:;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;overflow:visible;vertical-align:middle;outline:none;border-radius:;}
select {appearance:none;-moz-appearance:none;-webkit-appearance:none}select::-ms-expand { display: none; }select[multiple],select[size]{height:auto}
textarea{overflow-y:auto}
hr{height:;margin:15px 0;border:;border-top:1px solid #eee;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
b,strong{font-weight:}
sub,sup{position:relative;font-size:75%;line-height:;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}
table{border-spacing:;border-collapse:collapse}
header,footer,section,aside,article,main,nav,menu,details,summary,address,hgroup,figure,figcaption,legend{display:block;margin:;padding:}
audio,canvas,progress,video{display:inline-block;*display:inline;*zoom:}
audio:not([controls]){display:none;height:}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:;border-bottom:1px solid #e5e5e5}
time{display:inline}
svg:not(:root){overflow:hidden}
fieldset{padding:0.35em 0.625em 0.75em;margin:0 2px;border:1px solid #c0c0c0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:}
area{outline:none;blr:expression(this.onFocus=this.blur())}
[hidden],template{display:none}
abbr[title]{border-bottom:1px dotted}
dfn{font-style:italic}
mark{color:#000;background:#ff0}
small{font-size:80%}
figure{margin:1em 40px}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
/*通用属性*/ /*清除浮动*/
.clearfix{*zoom:;} /*解决ie6/7下面的浮动塌陷问题*/
.clearfix:before,
.clearfix:after{display:table; line-height:; content:" ";} /*display:table;解决其他下面的浮动塌陷问题,line-height是将添加的内容高度设为0；*/
.clearfix:after{clear: both;}/*清楚浮动*/ .head{text-align:center;color:#fff;position:relative;}
.head nav{position:relative;background-color:rgba(255, 255, 255, 0.2);position:absolute;width:100%;z-index:;}
.head h1{text-align:center;line-height:40px;font-size:16px;}
.head .nav_btn{position:absolute;top:0px;right:0px;width:40px;height:40px;background:url(../images/btnMenu.png) center center no-repeat;background-size:20px;}
.head .nav_logo{position:absolute;top:0px;left:10px;width:90px;height:40px;background-color:blue;background:url(../images/logo2.png) left center no-repeat;background-size:auto 25px;}
.head .banner_bg1{background:url(../images/1.jpg) no-repeat;background-size:cover;}
.head .banner_bg2{background:url(../images/2.jpg) no-repeat;background-size:cover;}
.head .banner_bg3{background:url(../images/3.jpg) no-repeat;background-size:cover;} /*swiper样式*/
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
}
实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 【温故而知新-Javascript】窗口效果 （全屏显示窗口、定时关闭窗口）
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- Bootstrap全屏
1.由于bootstrap中的.containter是根据媒体查询定死了width,所以页面不会占满全屏,若要全屏,则最外面的div的class不能用container(或改用.container-f ...
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
- 如何给PDF设置全屏动画
PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...
- Android强制横屏+全屏的几种常用方法
全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 1 requestWindowFeature(Window.FEATURE_NO_ ...
- html5--移动端视频video的android兼容，去除播放控件、全屏等
html5 中的video 在手机浏览器中的总结所有页面播放时, 如果选择全屏播放, 播放画面将浮动到屏幕的最上层 IOS 手机 自动播放 播放界面浮动文字 播放时是否自动全屏 能否嵌入在页面中播 ...
- PotPlayer 如何设置多屏幕全屏播放
如何在播放器中,设置扩展播放模式? 全屏设置/主全屏显示设备:Display2 如何使视频播放时,没有黑边并且全屏充满? 高宽比/处理方式:保持全屏宽高比 如果取消掉视频上方的文字提示信息 ...
随机推荐
- 计算机网络初探（ip协议）
粗读了两遍计算机网络(谢希仁),对于计算计算机网络算是有了一个初步的了解,所以打算写一篇文章(希望是教程)进行巩固(主要围绕IP协议). 局域网 因特网的产生和广泛使用极大地改变了我们的生活,但对于不 ...
- hdoj 4325 Flowers 线段树+离散化
hdoj 4325 Flowers 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4325 思路: 直接线段树,按照花的开放区间的大小建树,要注意虽然 ...
- phython编写图形界面
Python支持多种图形界面的第三方库,包括: Tk wxWidgets Qt GTK 等等. 但是Python自带的库是支持Tk的Tkinter,使用Tkinter,无需安装任何包,就可以直接使用. ...
- Oracle 每天自动生成AWR报告
经验丰富的老员工希望能够每天为数据库生成1个AWR报告,以便于后期分析数据库的性能变化,手动生成太麻烦,查了一下资料,发现可以自动生成,过程如下. 数据库环境:11gR2 RAC(双节点) AWR报告 ...
- sqlserver 全库查询 带架构
网上现有的全库查询,无法识别自定义架构的数据库结构: ) ) ) declare @counts int )--以上定义变量 declare cur1 cursor for select a.name ...
- 数据库文件*.sdf文件定时备份，但是大小的增量在不断增长的问题排查
在某项目上,使用SQL Server数据库,现场反馈每天定时备份数据库文件,每天的数据量是400多个申请单的量.之前每天增长量是50M,但是后来两天增长量是80M,每天的数据量差不多. 到底从什么地方 ...
- SQL-删除重复记录
前几日工作的时候,有个小需求,是要求删除一个表table_A里的重复记录(保留一条),假设以字段COL_PK重复来判断记录重复,那么有几种写法: 在Oracle里,可以利用rowid来删除,这是非常高 ...
- 使用FlexPaper实现在线预览
准备工作 1.下载并安装安装OpenOffice 2.下载并安装FlexPaper 3.下载jodconverter 5.下载并安装swftools 软件安装具体方式按照 这篇博客 :http://b ...
- MySQL 索引管理与执行计划
1.1 索引的介绍 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息.如果想按特定职员的姓来查找他或她,则与在表中搜索所有的行相比,索引有助于更快地获取信息. ...
- 【转】Win10下 python3和python2同时安装并解决pip共存问题
1.下载python3和python2 进入python官网,链接https://www.python.org/ 选择Downloads--->Windows,点击进入就可以看到寻找想要的pyt ...