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;
background: rgba(0,0,0,0.2);
}
.index_main .section1 .index_banner .item .inner .block_txt{
position: absolute;
top: 44%;
right: 10px;
left:10px;
opacity: 0;
transform: translateY(40px);
-webkit-transform: translateY(40px);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.index_main .section1 .index_banner .item.active .inner .block_txt{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
}
.index_main .section1 .index_banner .item .inner .block_txt h4{
font-size: 30px;
color: #fff;
text-align: center;
font-family: 'COCO';
}
.index_main .section1 .index_banner .item .inner .block_txt h2{
color: #fff;
font-size: 70px;
font-weight: bold;
text-align:center;
letter-spacing:5px;
}
.index_main .section1 .index_banner .item .inner .block_txt h2 span{
color: #f5c920;
display: inline-block;
letter-spacing: 5px;
}
.index_main .section1 .index_banner .item .inner .block_txt h3{
color: #fff;
font-size: 22px;
text-align:center;
margin-top: 10px;
letter-spacing: 3px;
}
.index_main .section1 .slick_txt{
width:30%;
height: 100%;
background-color: transparent;
transition: all 500ms ease;
-webkit-transition:all 500ms ease;
background-repeat: no-repeat;
position: absolute;
top: 0;
font-size: 0;
outline: none;
border:0;
}
.index_main .section1 .left{
left: 0;
}
.index_main .section1 .right{
right:0;
}
.index_main .section1 .slick_txt:hover .slick_arrow{
opacity: 1;
visibility: visible;
}
.index_main .section1 .slick_txt .slick_arrow{
width: 20px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
margin-top: -18px;
position: absolute;
top: 50%;
cursor: pointer;
transition: all 500ms ease;
-webkit-transition:all 500ms ease;
opacity: 0;
visibility: hidden;
}
.index_main .section1 .slick_txt .prev{
background-image:url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png);
background-size: contain;
left:60px;
}
.index_main .section1 .slick_txt .next{
background-image:url(//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png);
background-size: contain;
right:60px;
}
.index_main .section1 .slick_txt .prev:hover{
}
.index_main .section1 .slick_txt .next:hover{
}
.index_main .section1 .number{
position: absolute;
bottom:8%;
left: 50%;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255,255,255,0.2);
display: table;
padding: 0 20px;
width: auto;
text-align: center;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.index_main .section1 .number span{
font-family: "Myriad Pro","Microsoft YaHei";
font-size: 14px;
color: #fff;
margin-right:100px;
display: inline-block;
cursor: pointer;
position: relative;
transition: all 500ms ease;
-webkit-transition:all 500ms ease;
}
.index_main .section1 .number span:last-child{
margin-right: 0;
}
.index_main .section1 .number span:after{
content: "";
display: inline-block;
width: 0;
height: 2px;
background: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
bottom:-20px;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
-webkit-transition:all 500ms ease;
}
.index_main .section1 .number span.active:after{
width: 100%;
opacity: 1;
visibility: visible;
}
.index_main .section2{
background: #f5f5f5;
}
.index_main .section2 h3{
text-align: center;
}
.index_main .section3{
width: 100%;
height: 100%;
background: url(//repo.bfw.wiki/bfwrepo/image/5e5ef0b278727.png) no-repeat;
background-size: 100% 100%;
}
.index_main .section3 h3{
text-align: center;
}
.index_main .section4{
background: #f5f5f5;
}
.index_main .section4 h3{
text-align: center;
}
@media only screen and (max-width: 1600px){
.index_main .section1 .index_banner .item .inner .block_txt h4{
font-size: 28px;
}
.index_main .section1 .index_banner .item .inner .block_txt h2{
font-size: 60px;
}
.index_main .section1 .index_banner .item .inner .block_txt h3{
font-size: 20px;
}
}
@med.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0