2016-09-14 2 views
2

Ich bin so Neuling in Javascript! Ich brauche deine Hilfe, Leute (hübsch bitte).Wie funktioniert das fullPage.js-Plugin?

Ich muss fullPage.js Plugin in meine Webseite initialisieren, aber ich weiß nicht, was fehlt. Ich habe das Tutorial dafür gelesen, aber ich mache etwas falsch und ich weiß nicht was.

Dies ist mein HTML-Code:

<head> 
 
     <title>Title</title> 
 
     <meta charset="UTF-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
     <meta name="format-detection" content="telephone=no"> 
 
     <link rel="stylesheet" href='css/style.css' type='text/css' media='all' /> 
 
\t \t <link rel="stylesheet" type="text/css" media="all" href="css/animate.css"> 
 
     <link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ > 
 
     <!-- Latest compiled and minified CSS --> 
 
\t \t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin --> 
 
     <script src="js/script.js"></script> 
 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
     <script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin --> 
 
     <script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin --> 
 
     <script type="text/javascript" src='js/jquery-migrate.min.js'></script> 
 
     <script type="text/javascript"> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $('#fullpage').fullpage({ 
 
\t \t \t \t \t anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'], 
 
\t \t \t \t \t scrollingSpeed: 1000 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <div class="container-fluid" id="fullpage"> 
 
\t \t <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin --> 
 
</body>

Vielen Dank,

Sandra P.

+0

Sie haben '2' jquery js, warum? Außerdem ist das Laden aller 'js' Dateien in' head' eine schlechte Übung. Sie sollten js nach 'jquery.min.js' im DOM laden und versuchen,' jquery-latest.min.js' zu entfernen. Und behalten Sie die Konsolenprotokolle im Auge. – Vineet

+0

Das ist mein Fehler vom Konsolenprotokoll: (Index): 25 Uncaught TypeError: $ (...). Ganzseite ist keine Funktion Ich weiß nicht, wie ich den Code schreiben sollte, um in Ordnung zu sein. –

+0

Es bedeutet, 'jquery.fullPage.min.js' wird nicht beim Laden der Seite geladen.Bitte stellen Sie sicher, dass Sie den richtigen Pfad haben – Vineet

Antwort

2

Ich denke this Ihnen helfen können.

Und ich empfehle, um zu versuchen, sie zu ersetzen:

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> 
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> 

diesen

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" /> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> 

Dies sollte TypeError:. $(...).Fullpage die Fehler korrigieren. Schauen Sie sich einfach die Live example an.

Ich habe Ihr Beispiel geändert und es funktioniert, siehe this.

aktualisieren

sind ordnungsgemäß in dieser Reihenfolge:

  1. Styles;
  2. jQuery;
  3. jQuery Migrieren (ich glaube, Sie brauchen es nicht);
  4. jQuery FullPage und andere jQuery Plugins;
  5. Sie Code.

es wie dieses

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" /> 
<link rel="stylesheet" type="text/css" href="youCSS" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> 
<!--other jQuery plugins--> 

<script type="text/JavaScript" src="youJS"></script> 

aktualisieren 2

ersetzen youJS :)

<head> 
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" /> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
\t $('#fullpage').fullpage({ 
 
\t \t anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'], 
 
\t \t scrollingSpeed : 1000 
 
\t }); 
 
}); 
 

 
\t </script> 
 
</head> 
 
<body> 
 
\t <div class="container-fluid" id="fullpage"> 
 
\t \t <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
     <div class="section"> 
 
\t \t \t <div class="row first-section"> Some text. 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</body>

aussehen sollte
+0

Vielen Dank für Ihre Antwort, ich denke, ich bin mir nicht sicher, welche Reihenfolge sie haben sollten. Jetzt habe ich diese zwei Fehler: jquery.fullPage.min.js: 8 Uncaught ReferenceError: jQuery ist nicht definiert (anonyme Funktion) @ jquery.fullPage.min.js: 8 (anonyme Funktion) @ jquery.fullPage. min.js: 8 jquery-migrate.min.js: 2 JQMIGRATE: Migration ist installiert, Version 1.4.1 (Index): 23 Uncaught TypeError: $ (...). fullpage ist keine Funktion –

+0

können Sie zeigen mir bitte die Kopfmarke? Ich kann es nicht in der Geige sehen, vielleicht weiß ich nicht, wie man es anschaut –

+0

@Sandra P. Ja, fügen Sie dem Header hinzu und ersetzen Sie diesen ** youCSS ** und ** youJS ** Code. –