jquery.fullPage+slick实现响应式全屏滚动图文分页效果代码

代码语言:html

所属分类:布局界面

代码描述:jquery.fullPage+slick实现响应式全屏滚动图文分页效果代码,上下切换+左右切换

代码标签: 全屏 滚动 图文 分页 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
   
<meta charset="UTF-8" />
   
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
   
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
   
<title></title>

   
<!--默认样式-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

   
<!--响应式框架-->
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

   
<!--css3动画库-->
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css">

   
<!--banner大图基础样式-->
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/slick.1.8.css">

   
<!--页面滚动基础样式-->
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.fullPage.2.9.5.css">

   
<!--导航样式-->
   
<style>
        body
{background-color: #1b1b1b}
   
/*====================导航*********/
   
.header{
       
width:100%;
       
position:fixed;
       
top:0;
       
left:0;
       
z-index:999;
       
height:50px;
       
padding: 0 30px;
       
/*background: rgba(28, 35, 39, 0.8);*/
   
}
   
/*左侧logo*/
   
.header .left{
       
width: 12%;
   
}
   
.header .left a img{
       
height: 40px;
       
margin-top: 6px;
   
}
   
.header .left .img2{
       
display: none;
   
}
   
/*右侧*/
   
.header .nav{
       
-webkit-transition: 0.5s;
       
-moz-transition: 0.5s;
       
-o-transition: 0.5s;
       
transition: 0.5s;
       
height: 100%;
       
float: right;
       
line-height: 50px;
       
display: block;
   
}
   
.header .navbar_nav li{
       
float:left;
       
position: relative;
       
display: block;
   
}
   
.header .navbar_nav li:after{
       
content: "";
       
width: 0;
       
height: 2px;
       
background: orangered;
       
position: absolute;
       
bottom: 0;
       
left: 0;
       
transition: all 0.5s ease 0s;
   
}
   
.header .navbar_nav li:hover:after{
       
width: 100%;
   
}
   
.header .navbar_nav li a{
       
text-decoration: none;
       
height: 100%;
       
padding: 0 25px;
       
display: block;
       
-webkit-transition: 0.5s;
       
-moz-transition: 0.5s;
       
-o-transition: 0.5s;
       
transition: 0.5s;
       
color: #fff;
       
font-size: 16px;
   
}
   
.header .navbar_nav li:hover a{
       
color: orangered;
   
}
   
.header .navbar_nav li.dropdown{
       
display: inherit;
       
position: relative;
   
}
   
.header .navbar_nav li.dropdown .jt{
       
width: 20px;
       
height: 20px;
       
background: url(i/top.png) no-repeat;
       
background-size: 100% 100%;
       
display: block;
   
}
   
.header .navbar_nav li.dropdown .dropdown_menu{
       
display: none;
       
position: absolute;
       
top:50px;
       
width: 100%;
       
background: #fff;
       
box-shadow: 0 15px 27px 0 rgba(167,165,165,0.38);
       
width: 120%;
       
left: -10%;
   
}
   
.header .navbar_nav li.dropdown .dropdown_menu a{
       
font-size: 14px;
       
color: #666;
       
padding: 0 10px;
       
line-height: 40px;
       
text-align: center;
       
background: #fff;
       
margin-bottom: 2px;
   
}
   
.header .navbar_nav li.dropdown:hover .dropdown_menu{
       
display: block;
       
background: #f3f3f3;
       
-webkit-transition: 0.5s;
       
-moz-transition: 0.5s;
       
-o-transition: 0.5s;
       
transition: 0.5s;
   
}
   
.header .navbar_nav li.dropdown:hover .dropdown_menu a{
       
color: #666;
   
}
   
.header .navbar_nav li.dropdown:hover .dropdown_menu a:hover{
       
color: #fff;
       
background: orange;
   
}
   
/*白色背景的头部*/
   
.header.on{
       
background: #fff;
       
border-bottom: 1px solid #ccc;
   
}
   
.header.on .left .img1{
       
display: none;
   
}
   
.header.on .left .img2{
       
display: block;
   
}
   
.header.on .navbar_nav li a{
       
color: #333;
   
}
   
.header.on .navbar_nav li:hover a{
       
color: orangered;
   
}
   
#navToggle{
       
display: none;
   
}
   
   
.m_nav{
       
position: fixed;
       
top: 0px;
       
box-shadow: 0 15px 27px 0 rgba(167,165,165,0.38);
       
width: 100%;
       
height: 100%;
       
background: #fff;
       
transition: all ease 0.5s;
       
-webkit-transition: all ease 0.5s;
       
z-index: 1000;
       
opacity: 1;
       
visibility: visible;
       
margin-top: 0;
       
overflow-y: auto;
       
transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
       
top: 0;
       
transform: translateX(100%);
   
}
   
.m_nav.open{
       
transform: translateX(0);
   
}
   
.m_nav .top{
       
height: 60px;
       
padding: 20px;
       
box-sizing: border-box;
   
}
   
.m_nav .top .closed{
       
width: 30px;
       
height: 30px;
       
vertical-align: middle;
       
float:right;
       
cursor: pointer;
   
}
   
.m_nav .logo{
       
width: 100%;
       
margin:0 auto;
   
}
   
.m_nav .logo img{
       
height: 50px;
       
display: block;
       
margin:30px auto;
   
}
   
.m_nav .ul{
       
margin-top: 30px;
   
   
}
   
.m_nav .ul li{
       
padding: 0 20px;
       
       
border-bottom: 1px solid #f5f5f5;
       
transform: translateY(0);
       
-webkit-transform: translateY(100%);
       
transform: translateY(100%);
       
-webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
       
opacity: 0;
   
}
   
.m_nav.open .ul li{
       
opacity: 1;
       
-webkit-transform: translateY(0);
       
transform: translateY(0);
   
}
   
.m_nav .ul li:nth-child(1) {
       
-webkit-transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all .2s cubic-bezier(.77, 0, .175, 1) 0ms;
   
}
   
.m_nav .ul li:nth-child(2) {
       
-webkit-transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all .4s cubic-bezier(.77, 0, .175, 1) 0ms;
   
}
   
.m_nav .ul li:nth-child(3) {
       
-webkit-transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all .6s cubic-bezier(.77, 0, .175, 1) 0ms;
   
}
   
.m_nav .ul li:nth-child(4) {
       
-webkit-transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all .8s cubic-bezier(.77, 0, .175, 1) 0ms;
   
}
   
.m_nav .ul li:nth-child(5) {
       
-webkit-transition: all 1.0s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all 1.0s cubic-bezier(.77, 0, .175, 1) 0ms;
   
}
   
.m_nav .ul li:nth-child(6) {
       
-webkit-transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms;
       
transition: all 1.2s cubic-bezier(.77, 0, .175, 1) 0ms;
   
}
   
.m_nav .ul li a{
       
display: block;
       
text-decoration: none;
       
color: #333;
       
font-size: 16px;
       
height: 50px;
       
line-height: 50px;
       
width: 100%;
   
}
   
.m_nav .ul li .dropdown_menu{
       
display: none;
   
}
   
.m_nav .ul li.dropdown.active .dropdown_menu{
       
display: block;
   
}
   
.m_nav .ul li .dropdown_menu a{
       
display: block;
       
height: 50px;
       
line-height: 50px;
       
padding: 0 40px;
       
box-sizing: border-box;
       
border-bottom: 1px solid #f5f5f5;
   
}
   
.m_nav .ul li .dropdown_menu a:last-child{
       
border: none;
   
}
   
.banner{
       
width: 100%;
   
}
   
.banner img{
       
width: 100%;
   
}
   
   
@media screen and (max-width: 992px){
       
.header{
               
padding: 0 10px;
       
}
       
.header #navToggle {
               
height: 100%;
               
padding: 9px 15px;
               
margin-right: -15px;
               
display: inline-block;
               
float: right;
       
}
       
.header #navToggle span {
               
position: relative;
               
width: 25px;
               
height: 1px;
               
margin-top: 19px;
       
}
       
.header #navToggle span:before,
       
.header #navToggle span:after {
               
content: '';
               
position: relative;
               
width: 100%;
               
height: 1px;
               
left: 0;
       
}
       
.header #navToggle span,
       
.header #navToggle span:before,
       
.header #navToggle span:after {
               
-webkit-transition: 0.3s;
               
-moz-transition: 0.3s;
               
-o-transition: 0.3s;
               
transition: 0.3s;
               
display: block;
               
background: #4f4f4f;
       
}
       
.header #navToggle span:before {
               
top: 8px;
       
}
       
.header #navToggle span:after {
               
bottom: 10px;
       
}
       
.header #navToggle.open span:before {
               
top: 10px;
               
-webkit-transform: translateY(-11px) rotate(-45deg);
               
-moz-transform: translateY(-11px) rotate(-45deg);
               
-ms-transform: translateY(-11px) rotate(-45deg);
               
-o-transform: translateY(-11px) rotate(-45deg);
               
transform: translateY(-11px) rotate(-45deg);
       
}
       
.header #navToggle.open span:after {
               
bottom: 12px;
               
-webkit-transform: translateY(10px) rotate(45deg);
               
-moz-transform: translateY(10px) rotate(45deg);
               
-ms-transform: translateY(10px) rotate(45deg);
               
-o-transform: translateY(10px) rotate(45deg);
               
transform: translateY(10px) rotate(45deg);
       
}
       
.header #navToggle.open span {
               
background: none;
       
}
       
.header #navToggle.open span:before,
       
.header #navToggle.open span:after {
               
background: #4f4f4f;
       
}
       
       
.header .nav{
               
display: none;
       
}
       
       
.banner img{
               
height: 600px;
               
object-fit: cover;
       
}
   
}
   
</style>

   
<!--图片和滚屏样式-->
   
<style>
        /*banner背景图片动画*/
        @-webkit-keyframes scale-bg{
                from{
                        -webkit-transform:scale(1.2);
                        transform:scale(1.2);
                }
                to{
                        -webkit-transform:scale(1);
                        transform:scale(1);
                }
        }
        @keyframes scale-bg{
                from{
                        -webkit-transform:scale(1.2);
                        transform:scale(1.2);
                }
                to{
                        -webkit-transform:scale(1);
                        transform:scale(1);
                }
        }
        /*banner */
        .index_main{
                background: #f7f7f7;
        }
        .index_main .section1{
                position: relative;
        }
        .index_main .section1 .index_banner .item{
                background-size: cover;
                -webkit-background-size:cover;
                background-position: center;
                background-repeat: no-repeat;
                height:100vh;
                position: relative;
        }
        .index_main .section1 .index_banner .item.slick-current .scaleBg{
                visibility: visible;
                -webkit-animation:scale-bg 6s linear forwards;
                animation:scale-bg 6s linear forwards;
        }
        .index_main .section1 .index_banner .items{
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
        }
        .index_main .section1 .index_banner .items:after{
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0