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

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: #f.........完整代码请登录后点击上方下载按钮下载查看