3

我一直在使用 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>
4

3 回答 3

3

把这个教程放下！它是 (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其 ing ——即使按照 1996 年的标准，这也很糟糕。

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

预计到达时间：

谁能教我如何制作一个好的图像幻灯片

好吧，我不知道最好的幻灯片——我相信有人会介入来推广一个最喜欢的现有库，但我们当然可以改进你作为示例获得的代码。

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

# 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 样式显示和隐藏它们。

或者干脆把我引向一个好的教程？

这是个问题。我有一段时间没找了，但标准通常很差。

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

于 2013-02-16T15:20:12.450 回答
0

Internet Explorer可能有一个浏览器在文档对象上没有“图像”属性，因此该测试只是查看幻灯片放映是否可以正常工作。像这样的测试：

if (!something.property_name)

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

（编辑——IE 确实有这个属性，尽管文档跳过了它。）

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

于 2013-02-16T14:41:36.020 回答
0 
if (!document.images)

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

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

因为document.images它似乎没有理由测试属性的存在：http: //www.w3schools.com/jsref/coll_doc_images.asp

于 2013-02-16T14:41:37.747 回答