Question

<img id="slideshow" src="4.png" alt="image" width="264" height="264"/>
<script>
    source=["1.jpg", "2.JPG", "3.JPG"];
    for (var i=0; i<source.length; i++)
    {
        document.getElementById("slideshow").src = source[i];
    }
</script>

不太明白为什么这不起作用，我意识到这将停止在图像上，我认为至少lol，但它没有显示任何图像。

任何帮助都会非常感谢。

            <img id="slideshow" src="4.png" alt="image" width="264" height="264"/>
            <script>
            source=["1.jpg", "2.JPG", "3.JPG"];
            var i=0;
            var c=0;
            while (i<=0)
            {
            if (c<source.length)
            document.getElementById("slideshow").src = source[c];
            c++;
            else
            c=0;
            }
            </script>

任何想法如何让它停在每个来源然后重复？

Answer 1

您的代码中有拼写错误：

for (var i=0; i<source.lenth; i++)
                       ~~~~~
                       ^

它应该是length而不是lenth。

Answer 2

问题在于浏览器在不重新呈现页面的情况下执行JavaScript。所以你实际上改变了src，但浏览器没有显示任何动画，因为它只是在结束时显示状态。

要创建动画，请使用window.setTimeout（）。

而不是循环（for，while等），您更改函数中的src，然后使用window.setTimeout()调用相同的函数。< / p>

喜欢，

var num = 0;

function foo(){
    num = ++num % 4;
    document.getElementById("image").src = "image"+num+".jpg"
    window.setTimeout("foo()", 300);
}

提示：

尝试在其上构建jQuery和lib。
在Firefox中安装Firebug插件并调试Javascript以查看发生了什么。

为什么这个幻灯片代码不起作用？

2 个答案: