问题
I am trying to create a slider using jQuery but I am having difficulties linking my javascript file to my html. I have checked for semantic errors but can't seem to find any. There is no problem with css - only javascript seems to be not working.
<!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 file
$(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);
}
});
回答1:
I recommend using chrome developers tools:
1. Press F12
2. Once developers tools is open in chrome press ESC key to open the console
Once you are there you will see the error which is an extra tag in the line 50 of your code, in the console log the error will be shown like this:
Uncaught SyntaxError: Unexpected token } script.js:50
In your functions in JS you need to pass the active 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);
}
});
回答2:
I have checked your code. Last two brackets seems to be extra.
Try this 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);
}
回答3:
Try this:
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);
}
});
回答4:
Try replacing
<script type="text/javascript" src = "jquery.js"></script>
with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
来源：https://stackoverflow.com/questions/38946825/javascript-not-linking-with-html-file