效果如下：

直接上代码了：

说明：轮播图基于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中的文字盒子一直自动垂直居中的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. 【温故而知新-Javascript】窗口效果 （全屏显示窗口、定时关闭窗口）

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  3. Bootstrap全屏

    1.由于bootstrap中的.containter是根据媒体查询定死了width,所以页面不会占满全屏,若要全屏,则最外面的div的class不能用container(或改用.container-f ...

  4. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  5. h5的api dom全屏展示

    下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...

  6. 如何给PDF设置全屏动画

    PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...

  7. Android强制横屏+全屏的几种常用方法

    全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 1 requestWindowFeature(Window.FEATURE_NO_ ...

  8. html5--移动端视频video的android兼容，去除播放控件、全屏等

    html5 中的video 在手机浏览器中的总结所有页面播放时, 如果选择全屏播放, 播放画面将浮动到屏幕的最上层 IOS 手机   自动播放 播放界面浮动文字 播放时是否自动全屏 能否嵌入在页面中播 ...

  9. PotPlayer 如何设置多屏幕全屏播放

      如何在播放器中,设置扩展播放模式? 全屏设置/主全屏显示设备:Display2   如何使视频播放时,没有黑边并且全屏充满? 高宽比/处理方式:保持全屏宽高比   如果取消掉视频上方的文字提示信息 ...

随机推荐

  1. 【转】javascript中的LHS与RHS

    原文链接:http://www.cnblogs.com/yangxiaoguai132/p/5064625.html 最近在学习javascript过程中,接触了LHS与RHS的概念,刚开始的时候有点 ...

  2. Webstorm 快捷键大全 整理收录

    "工欲善其事,必先利其器" 作为一名开发人员,好用的工具能让你效率更高,剩下的时间用来偷懒吹牛逼吧... 以下整理Webstorm快捷键大全   Windows版本 注释(// 或 ...

  3. [WPF]本地化入门

    1. 前言 WPF的本地化是个很常见的功能,我做过的WPF程序大部分都实现了本地化(不管最终有没有用到).通常本地化有以下几点需求: 在程序启动时根据CultureInfo.CurrentUICult ...

  4. MySQL查看和修改表的存储引擎（转载+加点东西）

    1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎 两种方法: a.show table status from YOUR_DB_NAME where name='YOU ...

  5. 企业级分布式监控系统-Zabbix基础

    1.基础分部 1.1Zabbix简介 Zabbix 是一个企业级的分布式开源监控方案. 1.2监控系统架构 C/S架构 客户端/服务器端,这种架构适合规模较小,处于同一地域的环境 C/P/S 客户端/ ...

  6. appium测试准备记录

    一 获取应用程序包名(手机中不安装apk) windows 环境下: aapt工具 使用aapt工具,适合给程序自动获取apk的相关信息. //aapt 是sdk自带的一个工具,在SDK/buildt ...

  7. this的取值

    在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了. 情况1:构造函数 function Foo(){ this.name="王福朋" this ...

  8. day3、Linux快捷键及vim命令快捷键

    Linux命令行快捷键 快捷键: tab键  自动补全路径 目录  名字,  自动不全命令 快捷键: ctrl +l(小写) 清屏 . ctrl +c 取消当前操作 快捷键: ctrl +d(小写) ...

  9. 栈和队列的java简单实现

    今天看了一本书<啊哈 算法>,书的内容不多,一共两章,第一章是常见的排序算法包括桶排序.冒泡排序和快速排序,这些事基础的排序算法网上有很多资料说明,这里主要说第二章栈,对列,链表,书上使用 ...

  10. 【Win 10 应用开发】MIDI 音乐合成——音符消息篇

    在上一篇中,老周介绍了一些乐理知识,有了那些常识后,进行 MIDI 编程就简单得多了.尽管微软已经把 API 封装好,用起来也很简单,但是,如果你没有相应的音乐知识基础,你是无法进行 MIDI 编程的 ...