javascript不与html文件链接 [英] javascript not linking with html file
问题描述
我正在尝试使用jQuery创建滑块，但是在将我的JavaScript文件链接到html时遇到困难.我已经检查了语义错误，但似乎找不到任何错误. CSS没有问题-只有javascript似乎无法正常工作.
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文件
$(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);
}
});
推荐答案
我建议使用chrome开发人员工具:
1.按F12
2.在chrome中打开开发人员工具后，按ESC键打开控制台
到达该位置后，您将在代码的第50行中看到该错误，该错误是一个额外的标记，在控制台日志中，该错误将显示为:
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
在JS函数中，您需要传递活动变量
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);
}
});
这篇关于javascript不与html文件链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
