我的 JavaScript 幻灯片放映有什么问题？

Question

我一直在用 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);

}

Answer 1

首先，您需要在文档的头部使用脚本标记来引用您的外部 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 将阻止 link 执行 link 的正常行为（将您带到其他地方）。

Answer 2

如果要添加外部 js 文件，请将其添加到 header 部分

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

您错过了一些东西。最好让我们使用您的浏览器控制台来识别错误。您的 html 中没有元素的 ID 名为 decription.It 会报错。

document.getElementById("decription").innerHTML

并且您在 var 之后有 = 符号，这将给出错误

var = Image_Number = 0;
var = Image_Length = Image.length - 1;

还有一个typo.you混淆了图像数组和Image

var = Image_Length = Image.length - 1;// should be small case letter

应该是 image.length。在全局范围之外定义 Image_Number 变量，除非你用闭包包装它。

调用时不要直接在函数上使用参数setInterval.Rather用另一个函数包装它

function auto () {

    setInterval(function(){
       change_image(1);


    }, 3000);

}

不要在锚点的 href 属性中添加任何外部 link tag.Give 它是一个作为 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);

}

我的 JavaScript 幻灯片放映有什么问题？

What's Wrong With My JavaScript Slideshow?

html

javascript

slideshow