什么';我的JavaScript幻灯片有什么问题?
我一直在用JavaScript制作幻灯片,但我似乎无法让它正常工作。我想问题的一部分可能是我引用了一个外部的.js文件……我不确定我是否正确地使用href。但是,我尝试将脚本放在HTML页面的头部,并使用什么';我的JavaScript幻灯片有什么问题?,javascript,html,slideshow,Javascript,Html,Slideshow,我一直在用JavaScript制作幻灯片,但我似乎无法让它正常工作。我想问题的一部分可能是我引用了一个外部的.js文件……我不确定我是否正确地使用href。但是,我尝试将脚本放在HTML页面的头部,并使用href:ecoquiet.HTML替代,但这也不起作用 我的HTML: <img class=lawnslide src="lawn.jpg" name="slideshow"> <table> <tr>
href:ecoquiet.HTML
替代,但这也不起作用
我的HTML:
<img class=lawnslide src="lawn.jpg" name="slideshow">
<table>
<tr>
<td align=left><a href=ecoquiet.js onclick="return change_image(-1)">Previous</a></td>
<td align=right><a href="ecoquiet:change_image(1)">Next</a></td>
<td align=right><a href="ecoquiet:auto()">Auto</a></td>
</tr>
</table>
我的JavaScript:
function change_image (num) {
var image = new Array("lawn.jpg", "nicelawn.jpg", "eco.png");
var description = new Array("100% Organic", "Gasoline-Free", "75% Quieter");
var = Image_Number = 0;
var = Image_Length = Image.length - 1;
Image_Number = Image_Number + num;
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.slideshow.src=Image[Image_Number];
document.getElementById("decription").innerHTML = description[Image_Number];
return false;
}
function auto () {
setInterval("change_image(1)", 3000);
}
功能更改\u图像(num){
var image=新数组(“lawn.jpg”、“nicelawan.jpg”、“eco.png”);
var描述=新阵列(“100%有机”、“无汽油”、“75%静音”);
var=图像_编号=0;
var=Image\u Length=Image.Length-1;
图像编号=图像编号+num;
if(图像编号>图像长度){
图像编号=0;
}
如果(图像编号<0){
图像编号=图像长度;
}
document.slideshow.src=Image[Image_Number];
document.getElementById(“description”).innerHTML=description[Image_Number];
返回false;
}
功能自动(){
设置间隔(“更改图像(1)”,3000;
}
首先,您需要引用外部JS文件,并在文档头部添加一个脚本标记,如下所示:
<head>
<script type="text/javascript" src="ecoquiet.js"></script>
</head>
其次,从该文件调用函数时,不需要引用文件名
<table>
<tr>
<td align="left"><a href="javascript:change_image(-1); return false;">Previous</a></td>
<td align="right"><a href="javascript:change_image(1); return false;">Next</a></td>
<td align="right"><a href="javascript:auto(); return false;">Auto</a></td>
</tr>
</table>
返回false
将阻止链接执行链接的正常行为(将您带到其他地方)。如果要添加外部js文件,请将其添加到标题部分
<script type="text/javascript" src="ecoquiet.js"></script>
在var后面有=
符号,这将给出错误
var = Image_Number = 0;
var = Image_Length = Image.length - 1;
还有一个输入错误。你把图像数组和图像混淆了
var = Image_Length = Image.length - 1;// should be small case letter
应该是image.length
。在全局范围外定义image\u Number变量,除非用闭包将其包装
调用setInterval时不要直接在函数上使用参数,而是用另一个函数包装它
function auto () {
setInterval(function(){
change_image(1);
}, 3000);
}
不要向锚定标记的href属性添加任何外部链接。将其作为href提供一个哈希字符串,这样它就不会将您重定向到其他页面
<td align=left><a href='#' onclick="change_image(-1);">Previous</a></td>
<td align=right><a href="#" onclick="change_image(1);">Next</a></td>
<td align=right><a href="#" onclick="auto();">Auto</a></td>
以下是我对您的代码所做的更改:
var Image_Number = 0;
function change_image (num) {
var image = new Array("lawn.jpg", "nicelawn.jpg", "eco.png");
var description = new Array("100% Organic", "Gasoline-Free", "75% Quieter");
var Image_Length = image.length - 1;
console.log(Image_Length)
Image_Number = Image_Number + num;
console.log(Image_Number);
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.slideshow.src=image[Image_Number];
document.getElementById("description").innerHTML = description[Image_Number];
return false;
}
function auto () {
setInterval(function(){
change_image(1);
}, 3000);
}
var-Image\u-Number=0;
函数更改\u图像(num){
var image=新数组(“lawn.jpg”、“nicelawan.jpg”、“eco.png”);
var描述=新阵列(“100%有机”、“无汽油”、“75%静音”);
var Image_Length=Image.Length-1;
console.log(图像长度)
图像编号=图像编号+num;
控制台日志(图像编号);
if(图像编号>图像长度){
图像编号=0;
}
如果(图像编号<0){
图像编号=图像长度;
}
document.slideshow.src=image[image_Number];
document.getElementById(“description”).innerHTML=description[Image_Number];
返回false;
}
功能自动(){
setInterval(函数(){
改变图像(1);
}, 3000);
}
var Image_Number = 0;
function change_image (num) {
var image = new Array("lawn.jpg", "nicelawn.jpg", "eco.png");
var description = new Array("100% Organic", "Gasoline-Free", "75% Quieter");
var Image_Length = image.length - 1;
console.log(Image_Length)
Image_Number = Image_Number + num;
console.log(Image_Number);
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.slideshow.src=image[Image_Number];
document.getElementById("description").innerHTML = description[Image_Number];
return false;
}
function auto () {
setInterval(function(){
change_image(1);
}, 3000);
}