Javascript nicht mit HTML-Datei verknüpfen

Ich versuche, einen Schieberegler mit jQuery zu erstellen, aber ich habe Schwierigkeiten beim Verknüpfen meiner Javascript-Datei mit meinem HTML. Ich habe nach semantischen Fehlern gesucht, kann aber keine finden. Es gibt kein Problem mit CSS - nur Javascript scheint nicht zu funktionieren.Javascript nicht mit HTML-Datei verknüpfen

<!doctype html> 
<head> 
<title> 
content slider 
</title> 

<link rel="stylesheet" href="css/style.css"> 
<script type="text/javascript" src = "jquery.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 

</head> 
<body> 
<div id="container"> 
<header> 
<h1>JQUERY CONTENT SLIDER</h1> 
</header> 
<img src = "img/left.png" id="prev" alt="prev" > 
<div id="slider"> 
<div class = "slide" > 
<div class = "slide-copy"> 
<h2>slider 1</h2> 
<p background="black">this is slide one</p> 
</div> 
<img src="img/slider.png"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 2</h2> 
<p>this is slide two</p> 
</div> 
<img src="img/slider1.jpg"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 3</h2> 
<p>this is slide three</p> 
</div> 
<img src="img/slider2.jpg"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 4</h2> 
<p background="black">this is slide four</p> 
</div> 
<img src="img/slider3.jpg"> 

</div> 
<div class="slide" > 
<div class= "slide copy"> 
<h2>slider 5</h2> 
<p tex ="black">this is slide five</p> 
</div> 
<img src="img/2722526.png"> 

</div> 
</div> 
<img src = "img/slide-image.png" id="next" alt="next"> 



</div> 
</body> 
</head> 
</html>

JavaScript-Datei

$(document).ready(function(){ 
var speed = 500; //fade spped 
var autoswitch = true;//auto slider options 
var autoswitch_speed = 4000; //auto slider speed 

//add initial active class 
$('.slide').first().addclass('active'); 
//hide all slides 
$('.slide').hide(); 
//shpw first slide 
$('active').show(); 

$('#next').on('click',nextslide); 
$('#prev').on('click',prevslide); 
//autoslider handler 
if(autoswitch == true);{ 
    setinterval(nextslide.autoswitch_speed); 
} 
// switch to next slide 
function nextslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 

    }else{ 
     $('.oldactive').next().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
}); 
// 
function prevslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 

    }else{ 
     $('oldactive').prev().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 


});

Quelle

2016-08-14 Aditya Mehta

Was '$ ('aktiv') ist show() ; soll tun? Möchten Sie Elemente mit der Klasse 'active' auswählen? Dann vermisst du einen Punkt in deinem Selektor ... – Steve

Du benutzt diese Version auch ohne Anführungszeichen: '$ (aktiv)' – Steve

ja, ich habe das in der 8. Zeile gemacht –

Versuchen

<script type="text/javascript" src = "jquery.js"></script>

mit

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Quelle

2016-08-14 21:40:19

Ich werde versuchen, dies –

Nein immer noch das gleiche und ich habe auch versucht, beide Skript-Tags –

ersetzen Ich empfehle Chrom-Entwickler-Tools:
1. Drücken Sie F12
2. Sobald Entwickler-Tools ist in Chrom drücken ESC-Taste öffnen Sie die Konsole

zu öffnen Sobald Sie dort sind, werden Sie den Fehler sehen, die in der Zeile 50 des Codes einen zusätzlichen Tag ist, in das Konsolenprotokoll wird der Fehler wie folgt dargestellt werden:

Uncaught SyntaxError: Unexpected token }   script.js:50

in JS in Ihre Funktionen müssen Sie die aktive Variable

function nextslide(active){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 
    }else{ 
    $('.oldactive').next().addclass('active'); 
    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
function prevslide(active){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 
    }else{ 
     $('oldactive').prev().addclass('active'); 
    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
});

Quelle

2016-08-14 21:44:20

ich von Ihnen überprüft Pass-Code. Die letzten zwei Klammern scheinen extra zu sein.
Versuchen Sie diesen Code

$('#next').on('click',nextslide); 
$('#prev').on('click',prevslide); 
//autoslider handler 
if(autoswitch == true);{ 
    setinterval(nextslide.autoswitch_speed); 
} 
// switch to next slide 
function nextslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 

    }else{ 
     $('.oldactive').next().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
}); 
// 
function prevslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 

    }else{ 
     $('oldactive').prev().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
}

Quelle

2016-08-14 21:49:36

Ich habe dieses Problem bereits korrigiert, aber nicht funktioniert ... immer noch –

Versuchen Sie folgendes:

HTML:

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <title> 
     content slider 
    </title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <h1>JQUERY CONTENT SLIDER</h1> 
     </header> 
     <img src="img/left.png" id="prev" alt="prev"> 
     <div id="slider"> 
      <div class="slide"> 
       <div class="slide-copy"> 
        <h2>slider 1</h2> 
        <p background="black">this is slide one</p> 
       </div> 
       <img src="img/slider.png"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 2</h2> 
        <p background="black">this is slide one</p> 
       </div> 
       <img src="img/slider1.jpg"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 3</h2> 
        <p background="black">this is slide three</p> 
       </div> 
       <img src="img/slider2.jpg"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 4</h2> 
        <p background="black">this is slide four</p> 
       </div> 
       <img src="img/slider3.jpg"> 

      </div> 
      <div class="slide"> 
       <div class="slide copy"> 
        <h2>slider 5</h2> 
        <p background="black">this is slide five</p> 
       </div> 
       <img src="img/2722526.png"> 

      </div> 
     </div> 
     <img src="img/slide-image.png" id="next" alt="next"> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="js/script.js"></script> 
</body> 


</html>

JS:.

$(document).ready(function() { 
    var speed = 500; //fade spped 
    var autoswitch = false; //auto slider options 
    var autoswitch_speed = 4000; //auto slider speed 

    //add initial active class 
    $('.slide').first().addClass('active'); 
    //hide all slides 
    $('.slide').hide(); 
    //shpw first slide 
    $('.active').show(); 

    $('#next').off('click').on('click', nextslide); 
    $('#prev').off('click').on('click', prevslide); 
    //autoslider handler 
    if (autoswitch == true); { 
    setInterval(nextslide, autoswitch_speed); 
    } 
    // switch to next slide 
    function nextslide() { 
    $(".active").removeClass('active').addClass('oldactive'); 
    if ($('.oldactive').is('last-child')) { 
     $('.slide').first().addClass('active'); 

    } else { 
     $('.oldactive').next().addClass('active'); 

    } 
    $('.oldactive').removeClass('oldactive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
    } 

    // 
    function prevslide() { 
    $(".active").removeClass('active').addClass('oldactive'); 
    if ($('.oldactive').is('first-child')) { 
     $('.slide').last().addClass('active'); 

    } else { 
     $('.oldactive').prev().addClass('active'); 

    } 
    $('.oldactive').removeClass('oldactive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
    } 

});

Quelle

2016-08-14 21:52:24 nseepana

löste den Fehler durch die Verknüpfung noch nicht gemacht –

_js/script.js_ code hat so viele Syntaxfehler, Sie müssen sehr vorsichtig sein l mit ** camelCase **. – nseepana

Javascript nicht mit HTML-Datei verknüpfen

Antwort

Verwandte Themen