Question

我有一个横幅旋转器每60秒刷新一次，但我也希望每个横幅显示20秒，因为其中有3个。我知道在哪里放置setInterval代码，如我的评论所示，但我似乎无法让它工作。非常感谢任何帮助或建议。

var banners1 = {
    0:
    {
        'href': 'http://www.example.com/banner1.html',
        'src': 'http://www.example.com/banner1.gif'
    },
    1:
    {
        'href': 'http://www.example.com/banner2.html',
        'src': 'http://www.example.com/banner2.gif'
    },
    2:
    {
        'href': 'http://www.example.com/banner3.html',
        'src': 'http://www.example.com/banner3.gif'
    }

}
window.addEvent('domready', function() {
        function banner1()
        {
            var banner = $('banner1');
            var banner1Link = $('banner1').getElement('a');
            var banner1Image = $('banner1').getElement('img');

            for (var keys in banners1) {
                var object = banners1[keys];
                for (var property in object) {
                    if (property == 'href') {
                        var href = object[property];
                    }
                    if (property == 'src') {
                        var src = object[property];
                    }
                }
                banner1Link.setProperty('href', href);
                banner1Image.setProperty('src', src);
                console.log(href);
                console.log(src);
                /** wait 20 seconds **/
            }
        }
        var periodical = banner1.periodical(60000);
});

Answer 1

请改为尝试：

    function banner1()
    {
        var banner = $('banner1');
        var banner1Link = $('banner1').getElement('a');
        var banner1Image = $('banner1').getElement('img');

        var delay = 0;
        for (var keys in banners1) {
            var func = (function(key) { return function() {
                var object = banners1[key];
                for (var property in object) {
                    if (property == 'href') {
                        var href = object[property];
                    }
                    if (property == 'src') {
                        var src = object[property];
                    }
                }
                banner1Link.setProperty('href', href);
                banner1Image.setProperty('src', src);
                console.log(href);
                console.log(src);
            }; })(keys);

            setTimeout(func, delay);
            delay += 20000;
        }
    }

JavaScript没有睡眠风格的功能，因为在JavaScript运行时文档不会响应。这意味着当脚本处于休眠状态时，用户将无法与页面进行交互。

此方法一次性安排所有三个更新。它们将在脚本运行的0秒（立即），20秒和40秒后执行。

Answer 2

你可以使用javascript超时

 setTimeout('', 20000);

这将在20秒评论后立即添加。第一个变量是您想要调用的任何代码/函数。第二个是以毫秒（20秒）调用之前所需的时间。

编辑回答

 <script type="text/javascript">
    var imgs1 = new Array("http://www.omniadiamond.com/images/jwplayer/enel_culture.png","http://www.omniadiamond.com/images/jwplayer/evas_srm.png","http://www.omniadiamond.com/images/jwplayer/jackolantern.png");
    var lnks1 = new Array("http://test.com","http://test.com","http://test.com");
    var alt1 = new Array("test","test","test");
    var currentAd1 = 0;
    var imgCt1 = 3;
    function cycle1() {
      if (currentAd1 == imgCt1) {
        currentAd1 = 0;
      }
    var banner1 = document.getElementById('adBanner1');
    var link1 = document.getElementById('adLink1');
      banner1.src=imgs1[currentAd1]
      banner1.alt=alt1[currentAd1]
      document.getElementById('adLink1').href=lnks1[currentAd1]
      currentAd1++;
    }
      window.setInterval("cycle1()",20000);
    </script>
    <a href="http://test.com" id="adLink1" target="_top">
    <img src="http://www.omniadiamond.com/images/jwplayer/enel_culture.png" id="adBanner1" border="0"></a>

这会以20秒的间隔在60秒内循环通过所有三个。并且可以在http://jsfiddle.net/jawilliams346614/wAKGp/查看（设置间隔为1秒）

JavaScript睡眠功能

2 个答案:

编辑回答