首页 > 为什么我的slide不能实现呢?

为什么我的slide不能实现呢?

<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" contene="width=device-width,initial-scale=1,user-scalable=no"/> 
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.css">
<style>
*{margin: 0;padding: 0}
body{color: #ffffff;}
.section1{background-color: #7FFF00;}
.section2{background-color: #8A2BE2;}
.section3{background-color: #F0E68C;}
.section4{background-color: #FF0000;}
.section5{background-color: #00BFFF;}
.slide{text-align: center;}
</style>
</head>
<body>
<div id="fullpage">
    <div class="section section1">这是第一屏幕</div>
    <div class="section section2">
       <div class="slide">slide 1</div>
       <div class="slide">slide 2</div>
       <div class="slide">slide 3</div>
       <div class="slide">slide 4</div>
    </div>
    <div class="section section3">这是第三屏幕</div>
    <div class="section section4">这是第四屏幕</div>
    <div class="section section5">这是第五屏幕</div>
    
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
  $('#fullpage').fullpage();
});
</script>

</body>
</html>

可以参考这个demo的第二屏demo


应该是jquery.fullPage.css没加载到


没用过这个控件。一般来说你按照官方文档出问题的话,就直接把官方的例子运行下,好使就直接在官方的例子上改,把图片什么的都换成你的。如果你之前用过了好使,现在不好使了,那可能是库升级了,用法和以前有点小出入,比如在某些小地方需要加入个特定的div标签啥的,你仔细看看官方文档。

【热门文章】
【热门文章】