脚本没有在图像中循环[重复]答案

【问题标题】：The Script is not cycling through images [duplicate]脚本没有在图像中循环[重复]
【发布时间】：2016-06-20 17:47:12
【问题描述】：

所以基本上应该有一个红绿灯，它应该使用 CSS 幻灯片放映每个图像，但是它不起作用

<head>
<script type="text/javascript">
var Picture1 = new Image()
Picture1.src = "Traffic_Red.png"
var Picture2 = new Image()
Picture2.src = "Traffic_Amber.png"
var Picture3 = new Image()
Picture3.src = "Traffic_Green.png"
var Picture4 = new Image()
Picture4.src = "Traffic_Amber.png"
</script>
</head>
<body>
<p><img src="Traffic_Red.png" width="500" height="300" name="slide" /></p>




<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<4)
                step++;
            else
                step=1;
            setTimeout("slideit()",3000);
        }
        slideit();
</script>
</body>

【问题讨论】：

setTimeout("slideit()",3000); 应该是setTimeout(slideit,3000);
这似乎与 Alon Eitan 之前发布的问题几乎相同。这是来自（或为）一门课程吗？

标签： javascript html css slideshow

【解决方案1】：

eval("image"+step+".src");

所以你正在尝试访问image1.src

var Picture1 = new Image()

……但你称它为 Picture1 而不是 image1。

您只需要正确命名变量即可。

也就是说，使用eval 创建变量变量很糟糕。只需使用数组即可。

图片的name 属性已被弃用，取而代之的是id。

setTimeout 最好传递一个函数而不是一个要评估的字符串。

<p><img src="Traffic_Red.png" width="500" height="300" id="slide" /></p>

<script>
    var pictures = [new Image(), new Image(), new Image(), new Image()];
    pictures[0].src = "Traffic_Red.png";
    pictures[1].src = "Traffic_Amber.png";
    pictures[2].src = "Traffic_Green.png";
    pictures[3].src = "Traffic_Amber.png";


    var step=0;
    function slideit() {
        document.getElementById('slide").src =  pictures[step].src;
        step++;
        if (step >= 4) {
            step = 0;
        }
        setTimeout("slideit", 3000);
    }

    slideit();
</script>

【讨论】：

【解决方案2】：

只需将变量名称从 Picture1,Picture2,Picture3 .... 重命名为 image1,image2,image3 同样为 Ex;

替换：

<head>
<script type="text/javascript">
  var Picture1 = new Image()
  Picture1.src = "Traffic_Red.png"
  var Picture2 = new Image()
  Picture2.src = "Traffic_Amber.png"
  var Picture3 = new Image()
  Picture3.src = "Traffic_Green.png"
  var Picture4 = new Image()
  Picture4.src = "Traffic_Amber.png"
</script>
</head>

与：

<head>
    <title>Test</title>
    <script type="text/javascript">
        var image1 = new Image()
        image1.src = "Traffic_Red.png"
        var image2 = new Image()
        image2.src = "Traffic_Amber.png"
        var image3 = new Image()
        image3.src = "Traffic_Green.png"
        var image4 = new Image()
        image4.src = "Traffic_Amber.png"
    </script>
</head>

您的脚本如下所示：

<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            step++;
            if (step > 4) {
                step = 1;
            }
            setTimeout("slideit()",3000);
        }
        slideit();
</script>

【讨论】：