最近做个一个小项目首页是全屏滚动的,当时我们选择了fullPage.js的插件,当时觉得就是一个纵向的轮播图而已,实现起来应该是比较简单的,抽时间研究了一下,这里总结一下遇到的问题和收获.
Html代码(参考fullPage写的)
<!DOCTYPE html>
<html lang="en">
<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">
<!-- 引入css样式 -->
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./lib/index.css">
<title>全屏滚动</title>
</head>
<body>
<div class="fullPage">
<!-- 头部区 -->
<div class="header">
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">产品</a></li>
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">周边</a></li>
<li><a href="javascript:;">福利</a></li>
</ul>
</div>
<!-- 内容区 -->
<div class="full-box">
<!-- 第一屏 -->
<div class="full"></div>
<!-- 第二屏 -->
<div class="full"></div>
<!-- 第三屏 -->
<div class="full"></div>
<!-- 第三屏 -->
<div class="full"></div>
<!-- 第四屏 -->
<div class="full"></div>
<!-- 第五屏 -->
<div class="full"></div>
</div>
<!-- 导航区 -->
<ol class="full-nav"></ol>
<