Javascript，在一定时间内显示图像，以图像索引为条件答案

【问题标题】：Javascript, displaying images for certain lengths of time, conditional on image indexJavascript，在一定时间内显示图像，以图像索引为条件
【发布时间】：2015-11-13 22:49:53
【问题描述】：

我是 javascript 的新手，我正在努力让我的图像一个接一个地显示可变长度的时间，这取决于它们的图像索引是否均匀。如果图像有一个偶数索引，我想显示 800 毫秒，如果它有一个奇数索引，我想显示 200 毫秒。我已经从网络上的不同地方采用了这段代码。有人可以帮我吗？

<html>
<head>

<img src="htp://user.local/web/images/owl.png" alt="rotating image" width="400" height="300" id="rotate">    
<script>

(function() {

    var rotate = document.getElementById('rotate');

    var iDir = 'http://user.local/web/images/';

    var idx = 0;

    var imag = ['ball.png','owl.png','bee.png','nail.png'];

    var x

    var imagPres = 0;

    for (x in imag) {

        if (imag.indexOf(x) % 2 != 0) {

            imagPres = .2;

    } else if (imag.indexOf(x) % 2 == 0) {

        imagPres = .8;

    }

    var chImg = function() {

        rotate.src = iDir + imag[idx++];

};

setInterval(chImg, imagPres * 1000);

})();
</script>
</head>
</html>

【问题讨论】：

你能解释一下什么不起作用吗？您检查过控制台是否有错误？
@wahwahwah 页面加载了第一张图片并保持不变。没有任何变化。
尝试使用 setTimeout 而不是 setInterval
@faadi 我尝试过这个，同样的行为。并且检查元素并没有显示任何奇怪的东西。至少我不能说。

标签： javascript

【解决方案1】：

也许您应该使用setTimeout 而不是setInterval。然后代替for循环，让setTimeout函数再次调用函数chImg。

例如：

<html>
<head>
</head>
<body>
<img src="htp://user.local/web/images/owl.png" alt="rotating image" width="400" height="300" id="rotate">
<script>
    (function() {
        var rotate = document.getElementById('rotate');
        var iDir = 'http://user.local/web/images/';
        var idx = 0;
        var imag = ['ball.png','owl.png','bee.png','nail.png'];
        var imagPres = 0;
        var lengthInMilliseconds = 1000;
        var len = imag.length;

        var chImg = function () {
            imagPres = 0.8;
            if (idx % 2 == 0) {
                imagPres = .2;
            }
            idx = idx === len - 1 ? 0 : ++idx;
            rotate.src = iDir + imag[idx];
            setTimeout(chImg, imagPres * lengthInMilliseconds);
        };
        setTimeout(chImg, imagPres * lengthInMilliseconds);
        })();
</script>
</body>
</html>

【讨论】：