什么'我的JavaScript幻灯片有问题
What's Wrong With My JavaScript Slideshow?
我一直在用JavaScript制作幻灯片,但我似乎无法让它发挥作用。我认为问题的一部分可能是我引用了一个外部.js文件。。。我不确定我是否用href做得很好。然而,我尝试将脚本放在HTML页面的头部,并使用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);
}
如果您想添加外部js文件,请将其添加到的头部
<script type="text/javascript" src="ecoquiet.js"></script>
你错过了几件事让我们更好地使用浏览器控制台来识别错误。您的html中没有一个元素具有名为deciption的id。它将给出一个错误。
document.getElementById("decription").innerHTML
并且在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_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);
}
首先,您需要在文档的头部引用带有脚本标记的外部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>
return false
将阻止链接执行链接的正常行为(将您带到其他地方)。
相关文章:
- JavaScript幻灯片显示,每个幻灯片的下一个按钮都有不同的位置
- 旧的javascript幻灯片只显示wihtout幻灯片(onclick)
- Javascript幻灯片淡出
- HTML Javascript 幻灯片优化
- 清除窗口Javascript幻灯片
- javascript幻灯片无法正常工作
- 淡入淡出javascript幻灯片
- 图像的Javascript幻灯片放映
- 如何使用for循环制作javascript幻灯片
- 什么'我的JavaScript幻灯片有问题
- 我在一页上有两个简单的javascript幻灯片,但第二个停止了第一个工作
- 没有jquery的JavaScript幻灯片
- 在单个页面上使用多个JavaScript幻灯片时遇到问题
- 悬停时暂停 Javascript 幻灯片
- 如何向我的 JavaScript 幻灯片添加淡出效果
- JavaScript 幻灯片暂停悬停
- 不使用包装器元素的 Javascript 幻灯片库
- 使用导航按钮制作基本 Javascript 幻灯片时出错
- 直接在 Javascript 幻灯片上添加文本
- 简单的Javascript幻灯片功能不起作用