Question

我一直在使用JavaScript教程来帮助我在大学任务中实现一些JavaScript。因此，我使用了一个来帮助我创建一个图像幻灯片，它包含一个if语句，如下所示。

if (!document.images)
    return
document.images.SlideShow1.src=eval("image"+slide+".src

但是我不太确定它在做什么，特别是(!document.images)部分。

修改

另外，我可以看到我在本教程中做出了错误的选择，有人会告诉我如何制作一个好的图像幻灯片，或者只是指导我一个好的教程吗？这是我目前正在使用的所有代码

<head>
<script type="text/javascript">
        <!--
        var image1=new Image()
        image1.src="Images/Foam2012/Misty.gif"
        var image2=new Image()
        image2.src="Images/Foam2012/Foamy.gif"
        var image3=new Image()
        image3.src="Images/Foam2012/17.gif"
        var image4=new Image()
        image4.src="Images/Foam2012/16.gif"
        var image5=new Image()
        image5.src="Images/Foam2012/2.gif"
        var image6=new Image()
        image6.src="Images/Oxjam2012/Rainbow.gif"
        var image7=new Image()
        image7.src="Images/Oxjam2012/17.gif"
        var image8=new Image()
        image8.src="Images/Oxjam2012/9.gif"
        var image9=new Image()
        image9.src="Images/Oxjam2012/2.gif"
        var image10=new Image()
        image10.src="Images/RagDay2012/GasMask.gif"
        var image11=new Image()
        image11.src="Images/RagDay2012/22.gif"
        var image12=new Image()
        image12.src="Images/RagDay2012/21.gif"
        var image13=new Image()
        image13.src="Images/RagDay2012/20.gif"
        var image14=new Image()
        image14.src="Images/RagDay2012/16.gif"
        var image15=new Image()
        image15.src="Images/RagDay2012/6.gif"
        var image16=new Image()
        image16.src="Images/RagDay2012/5.gif"       
        var image17=new Image()
        image17.src="Images/RagDay2012/4.gif"
        var image18=new Image()
        image18.src="Images/RagDay2012/1.gif"
        var image19=new Image()
        image19.src="Images/UV2012/17.gif"
        var image20=new Image()
        image20.src="Images/UV2012/14.gif"
        var image21=new Image()
        image21.src="Images/UV2012/9.gif"
        var image22=new Image()
        image22.src="Images/UV2012/7.gif"
        var image23=new Image()
        image23.src="Images/UV2012/6.gif"
        //-->
    </script>
</head>
<body>
<img id="SlideShow1" style="padding-bottom: 5px" src="Images/Foam2012/Foamy.gif"      width="350px" height="300px" alt="Image Slideshow"/>
    <script type="text/javascript">
        <!--
        var slide = 1
        //Declares a variable called slide which equals 1
        function slideit(){
        if (!document.images)
        return
        document.images.SlideShow1.src=eval("image"+slide+".src")
        if (slide<23)
        slide++
        else
        slide = 1
        //call function "slideit()" every 1.5 seconds
        setTimeout("slideit()",1500)
        }
        slideit()
        //-->
    </script>
</body>

Answer 1

放下本教程！它是（a）古代......

if (!document.images)
   return

这是对images集合进行功能嗅探，这是一种掌握<img>元素的老式方法。自Netscape 3以来，每个支持JavaScript的浏览器都支持该阵列，因此它显示了一个1996年复古的脚本。

......和（b）可怕。

document.images.SlideShow1.src=eval("image"+slide+".src");

这是一个真正不知道自己在做什么的人的标志。您始终可以使用[]语法访问对象属性：

document.images.SlideShow1.src=window['image'+slide].src;

因此，从来没有必要使用在字符串中创建JavaScript表达式的慢速，危险，可怕的方法并eval - 即使按照1996年的标准，这也很差。

但即便如此，通过名称window访问变量通常也是有问题的。

ETA：

有人会告诉我如何制作好的图像幻灯片

嗯，我不知道最好的幻灯片 - 我相信有人会介入推广一个最喜欢的现有图书馆，但我们当然可以改进你所拥有的代码作为一个例子。

因此，将一系列对象保存在单独的编号变量中通常表明您真正想要的是一个数组：

# List of image paths inside Images/
#
var paths= [
    'Foam2012/Misty.gif', 'Foam2012/Foamy.gif', 'Foam2012/17.gif', 'Foam2012/16.gif', 'Foam2012/2.gif',
    'Oxjam2012/Rainbow.gif', 'Oxjam2012/17.gif', 'Oxjam2012/9.gif', 'Oxjam2012/2.gif',
    'RagDay2012/GasMask.gif', 'RagDay2012/22.gif', 'RagDay2012/21.gif', 'RagDay2012/20.gif', 'RagDay2012/16.gif', 'RagDay2012/6.gif', 'RagDay2012/5.gif', 'RagDay2012/4.gif', 'RagDay2012/1.gif',
    'UV2012/17.gif', 'UV2012/14.gif', 'UV2012/9.gif', 'UV2012/7.gif', 'UV2012/6.gif',
];

# Preload images
#
var images= [];
for (var i= 0; i<paths.length; i++) {
    var image= new Image();
    image.src= 'Images/'+paths[i];
    images.push(image);
}

# Rotate image every 1.5s
#
var imagei= 0;
setInterval(function() {
    imagei= (imagei+1) % images.length;
    document.getElementById('SlideShow1').src= images[imagei].src;
}, 1500);

您还可以采取其他措施来改善这一点 - 例如，将所有图像作为<img>标记放在页面中可能会更好，以便非JavaScript代理可以看到其内容作为搜索引擎。然后，您可以使用display CSS样式显示和隐藏它们。

或者只是指导我一个好的教程？

It's a problem。我没有看过一段时间，但标准通常很差。

虽然我不是jQuery的粉丝，你可能会发现一些使用它的教程材料很有帮助，因为至少它往往以更现代的方式编写。

Answer 2

~~Internet Explorer~~ 可能有一个浏览器在文档对象上没有“images”属性，因此测试只是看幻灯片放映是否有效。测试如下：

if (!something.property_name)

JavaScript中的

是一种（稍微冒险，取决于具体情况）测试对象是否具有特定名称的属性的方法。在这种情况下，它没有风险：如果文档对象上有“images”属性，那么它将是文档中图像（<img> DOM元素）的列表（可能是空的）。如果该属性不存在，那么该测试将返回true。

（编辑 - IE确实拥有该属性，但文档会跳过它。）

这里的共识是，测试它是不值得的。我还认为您可能会考虑您真正想要的是一个幻灯片，其中包含所有页面上的图像。在我看来，这不太可能是现实的;真实页面包含图标，标题，徽标，小部件等图像。有更好的API可用于查找您感兴趣的图像。

Answer 3

if (!document.images)

测试文档中是否存在images（非空），因为

不同的浏览器的属性名称不同
页面可能没有图片

对于document.images，似乎没有理由测试属性是否存在：http://www.w3schools.com/jsref/coll_doc_images.asp

if（！document.images）

3 个答案: