Question

我有当前的JavaScript问题。我的网站上有四个相邻的部门，每隔10秒就会不停地旋转图像。我需要这些间隔来保持当前间隔旋转图像，但彼此间隔5秒钟才能获得漂亮的瀑布效果。如何使用JavaScript完成此操作？

image of how it looks on my websites' header

这是我目前用于显示单个分区并处理图像旋转的代码示例。

<div class = "TestRotator">
<img src="http://bushveld.info/wp-content/uploads/2013/07/image1.png" alt="rotating" width="100" height="232" id="rotator">
<script type="text/javascript">
(function () {
    var rotator = document.getElementById('rotator'); // change to match image ID
    var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
    var delayInSeconds = 5;
    // set number of seconds delay
    // list image names
    var images = ['image2.png', 'image3.png', 'image4.png'];
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
</div>

Answer 1

我已经摆弄了很多东西！（我改变了很长时间。）

setInterval()和setTimeout()以及其他许多人。{/ p>

this你想要的是什么吗？

PS：state保存imgs更改的第一张图像。和超时的差异（200毫秒是为了在它们之间产生一些差异，如果你愿意，你可以将它改为圆形数字。）

Answer 2

如果我理解你的问题，你需要这样的事情：

window.onload = function () {
    var // Customable parameters
        imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/',
        interval = 2, // Interval between "flushes" in seconds. Must be > speed * maxScreens
        speed = 0.1, // "Flush" speed in seconds
        maxScreens = 4, // amount of used image tags
        images = 4, // amount of image sources, can be > maxScreens
        dir = 1, // 1 = from left to right, -1 = from right to left
        // Program
        flush,
        target = (dir > 0) ? 1 : maxScreens,
        targetOrigo = target,
        changeImage = function() {
            var img = document.getElementById('rotator' + target),
                id = parseInt(img.src.substr(img.src.length - 5, 1), 10) - dir;
            if (id < 1) {
                id = images;
            }
            if (id > images) {
                id = 1;
            }
            img.src = imageDir + 'image' + id + '.png';
            if (target !== maxScreens - targetOrigo + 1) {
                target += dir;
                setTimeout(changeImage, speed * 1000);
            }  else {
                target = targetOrigo;
                setTimeout(runRotation, interval * 1000);
            }
            return;
        },
        runRotation = function () {
            setTimeout(changeImage, speed * 1000);
        };  
    setTimeout(runRotation, 1000);
}

A live demo at jsFiddle

请注意，我已将该函数置于window.onload，在旋转开始之前已加载所有图像时看起来更好。

该代码段根本不使用setInterval()，而是基于嵌套的setTimeout()。这样，如果用户访问其他标签页然后返回您的网站，您可以避免使用a mess（取决于使用的浏览器）。

您可以使用间隔，“冲洗”速度，旋转时的图像数量，甚至您想要使用的图像数量（最大= 9）。您也可以切换旋转方向。

如果您想避免同时显示两个相似的图片，可以将image5.png添加到图片文件夹，然后设置images = 5。

另外version使用可用的图像源阵列。

Answer 3

Thanx很多输入。我通过以这种方式调整代码来解决这个问题......

           (function() {
           var rotator3 = document.getElementById('rotator3');  // change to match   image ID
           var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';                          
                                      // set number of seconds delay
            // list image names
           var images = ['image2.png', 'image3.png', 'image4.png',  'image1.png'];

// don't change below this line
           var num = 0;
           var changeImage = function() 
           {
             var len = images.length;
             rotator3.src = imageDir + images[num++];
                 if (num == len)
                 {
                     num = 0;
                 }
           };

          function SwImg() {
      var rotate = setInterval(changeImage, 20000);


     }


   setTimeout(SwImg,15000);


        })();

这个调整基本上会在每个分区产生5 ++秒的初始延迟，开关之间的标准20秒延迟间隔，每个分区中的每个图像在另一个分区后5秒旋转。 Here is a link to the website，将在本周末完成。再次感谢您提供的输入，真正令人敬畏和创造性的方法来解决这个问题！

干杯

使用javascript自动更改图像

3 个答案: