javascript - 如何通过外部js文件运行javascript图像幻灯片？

Question

我的网站上有这个 slider ，工作正常...它只是一个图像更改器，可以更改幻灯片上的图像，其代码写在 main.html 文件中，就是这样

<img src="images/1.jpg" name="slide"  width="100%" height="368" />
<script>
<!--
    var image1=new Image()
    image1.src="images/1.jpg"
    var image2=new Image()
    image2.src="images/4.jpg"
    var image3=new Image()
    image3.src="images/3.jpg"

    //variable that will increment through the images
    var step=1
    function slideit(){
        //if browser does not support the image object, exit.
        if (!document.images)
            return
        document.images.slide.src=eval("image"+step+".src")
        if (step<3)
            step++
        else
            step=1
        //call function "slideit()" every 2.5 seconds
        setTimeout("slideit()",2500)
    }
    slideit()
//-->
</script>

现在它工作得很好..我想要的只是我有一个文件名 page1.js 我想将我的 javascript 代码放在该文件中而不是我的 main.html 文件中..请告诉我如何放置它page1.js 文件中的 javascript 代码并调用它，以便图像幻灯片放映可以正常工作，因为它现在可以在同一文件中使用 javascript 代码。

Answer 1

将上面的 javascript 放入名为 my-slides.js 的文件中，然后将当前 HTML 文件中的 script 标记替换为以下标记:

<script type="text/javascript" src="my-slides.js"></script>

确保 my-slides.js 与您的 HTML 文件位于同一文件夹中，否则相应地更改路径。

<小时/>

FWIW，虽然您在问题中没有提出这一点，但我认为我还应该提到以下内容:

• 考虑使用大括号在 if 和 else block 中定义代码块，即使它是单行。确实提高了代码的可读性
• 这一行:document.images.slide.src=eval("image"+step+".src")使用了eval，您应该避免使用它。我不确定通过用 eval 包装字符串连接可以完成什么。我会将Image存储在一个数组中，并通过索引访问它。
• 不要在函数内使用 setTimeout 来重复执行，而是考虑在函数外部使用 setInterval。

<小时/>

按照要求。

这是 my-slides.js 应该包含的内容。

    var numImages = 3;
    var images = [];
    for (var i = 0; i < numImages; ++i) {
        var image = new Image();
        image.src = 'images/' + (i + 1) + '.jpg';
        images.push(image);
    }

    var step = 0;
    function slideit() {
        if (! document.images) {
            return;
        }
        document.images.slide.src = images[step].src;
        step = (step + 1) % numImages;
    }
    setInterval(slideit, 2500);