1

我有当前的 JavaScript 问题。我的网站上有四个相邻的分区，它们以 10 秒的间隔不断地旋转图像。我需要这些间隔以保持当前间隔旋转图像，但开始时彼此间隔 5 秒以获得漂亮的瀑布效果。如何使用 JavaScript 完成此操作？

它在我的网站标题上的外观图片

这是我目前用来显示单个分割和处理图像旋转的代码示例。

<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>
4

3 回答 3

1

我已经摆弄了很多！（我改变了很多次。）

和许多其他人setInterval()一起接受setTimeout()了。

这是你想要的吗？

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

于 2013-07-23T15:43:27.517 回答
0

如果我正确理解了你的问题，你需要这样的东西：

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);
}

jsFiddle 的现场演示

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

该片段根本不使用setInterval()，而是基于嵌套setTimeout()的 s。这样，如果用户访问其他选项卡然后返回您的网站，您可以避免出现混乱（取决于使用的浏览器）。

您可以使用间隔、“刷新”速度、旋转时拥有的图像数量，甚至您喜欢使用多少不同的图像（最大 = 9）。您还可以切换旋转方向。

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

还使用可用的图像源数组进行版本。

于 2013-07-23T15:49:07.047 回答
0

非常感谢您的输入。我通过以这种方式调整代码解决了这个问题......

           (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 秒。这是该网站的链接，将在本周末完成。再次感谢您的意见，解决这个问题的方法真的很棒而且很有创意！

干杯

于 2013-07-24T08:09:37.620 回答