                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /FullPage.js全屏滚动插件

代码一样怎么就效果不同呢，还有我的那个幻灯片的箭头没有，div也要清除浮动

<!DOCTYPE html>

<html>

<title>无标题文档</title>

<style>

*{margin:0; padding:0;}

body{

color:#fff;

}

.slide{

text-align:center;

float:left;

}

</style>

</head>

<body>

<div><h1>这是第一张</h1></div>

<div><h1>这是第二张</h1></div>

<div><h1>这是第三张</h1></div>

<div><h1>这是第四张</h1></div>

</div>

<div><h1>这是第二屏</h1></div>

<div><h1>这是第三屏</h1></div>

<div><h1>这是第四屏</h1></div>

</div>

</script>

</script>

$(document).ready(function(){

$('#fullpage').fullpage({

sectionsColor:['#c7e5de','#feccc5','#a7c7a0','#c7abbf'],

});

</script>

</body>

</html>

qq_慕UI4158040

2015-10-12

源自：FullPage.js全屏滚动插件 2-1

关注问题我要回答

944

操作

收起

2 回答

釋淨靈_南無阿彌陀佛
2015-12-26

<div id="fullpage">
  <div class="section ">
      <div><h1>这是第一张</h1></div>
      <div><h1>这是第二张</h1></div>
      <div><h1>这是第三张</h1></div>
      <div><h1>这是第四张</h1></div>
  </div>
  <div><h1>这是第二屏</h1></div>
  <div><h1>这是第三屏</h1></div>
  <div><h1>这是第四屏</h1></div>
</div>

看起來,您的slide沒設置這個class="slide"

而且您只有第一屏有下class="section",第二三四屏都沒下,好像不符合fullpage的結構,下面是老師說過的結構喔~給您參考

<div class="section">這是第一屏</div>
<div class="section">
        <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">這是第三屏</div>
<div class="section">這是第四屏</div>

0 回复有任何疑惑可以回复我~

收起回答

Y_du
2015-10-12

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>无标题文档</title>
<link rel="stylesheet" href="href="http://cdn.dowebok.com/77/css/jquery.fullPage.css""/>
<style>
*{margin:0; padding:0;}
body{
 color:#fff;

 }

   .slide{
    text-align:center; 
    height: 100px;
   }
</style>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
</script>
<script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js">
</script> 
</head>

<body>
<div id="dowebok">
    <div>
        <h3>第一屏</h3>
    </div>
    <div>
        <h3>第二屏</h3>
    </div>
    <div>
        <div>第三屏的第一屏</div>
        <div>第三屏的第二屏</div>
        <div>第三屏的第三屏</div>
        <div>第三屏的第四屏</div>
    </div>
    <div>
        <h3>第四屏</h3>
    </div>
</div>

<script>
 $(document).ready(function(){
    $('#dowebok').fullpage({
      sectionsColor:['#c7e5de','#feccc5','#a7c7a0','#c7abbf'], 
    });
 }); 
 </script>
</body>
</html>

你原来的fullpage的css没有引入