Question

我有以下javascript。当我在两个图像之间循环时，它运行良好，但是当我添加第三个图像时，它无法正常工作。

这是我的CSS：

img {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    position: absolute;
    width: 320px;
    height: auto;
}

img.fade-out {
    opacity: 0;
}

img.fade-in {
    opacity: 1;
}

这是我的javascript，它似乎有效，但看起来很迟钝，绝对不是一个优雅的解决方案。

</head><body style="color: black">
<img id="one" class="fade-out" src="Wallpaper.png"/>
<img id="two" class="fade-out" src="Wallpaper0.png"/>
<img id="three" class="fade-out" src="Wallpaper1.png"/>

    <script>
        var images = ['Wallpaper.png', 'Wallpaper0.png', 'Wallpaper1.png'];
        var index = 0;

        var fade_in = one;
        var fade_out = two;
        var fade_foo = three;

        fade_in.src = images[0];
        fade_out.src = images[images.length - 1];

        var fade = function () {
            fade_in.src = images[index];
            index = (index + 1) % images.length;

            fade_in.className = 'fade-out';
            fade_out.className = 'fade-in';
            fade_foo.className = 'fade-out';

            var fade_tmp = fade_in;
            fade_in = fade_out;
            fade_out = fade_foo;
            fade_foo = fade_tmp;

            setTimeout(fade, 15000);
        };

        fade();
</body></html>

Answer 1

首先，你没有改变fade_out.src。尝试这样的事情：

fade_in.src = images[0];
fade_out.src = images[1]; // let's use image next to current for fade-out

var fade = function () {
    fade_in.src = images[index];
    index = (index + 1) % images.length;
    fade_out.src = images[index]; // put next to current image into fade-out

    // Code below does something misterious. 
    // You first switch classes between two img's, then switch variables themselves
    // Why?
    //fade_in.className = 'fade-out';
    //fade_out.className = 'fade-in';

    //var fade_tmp = fade_in;
    //fade_in = fade_out;
    //fade_out = fade_tmp;

    setTimeout(fade, 15000);
};

由于我不知道你到底在做什么，所以说不出更多。

Answer 2

在交换源代码之前，你不是在等待转换完成。我们只需要重新排列事物的顺序。

    var fade = function() {

        fade_in.className = 'fade-out';
        fade_out.className = 'fade-in';

        setTimeout(function() {

            index = (index + 1) % images.length;
            fade_in.src = images[index]; // should be completely invisible at this time

            var fade_tmp = fade_in;
            fade_in = fade_out;
            fade_out = fade_tmp;

        }, 2000); // 2 seconds, same as your transition time

        setTimeout(fade, 15000);
    };

    setTimeout(fade, 15000);

这里fade方法所做的唯一工作就是更改启动转换的类。我们设置一个与您的转换时间相匹配的延迟来更新索引并交换图像源。

编辑：我想我不清楚发生了什么以及我正在做出的假设。这是我完整的HTML，除了提供的css是相同的。我还修复了自上一个例子以来图像顺序的问题。

<body>
    <img id="one" class="fade-out" /><img id="two" class="fade-out" />
    <script>
        var images = ['16jog8h.jpg', '20_11_2007_0044537001195507712_joe_baran.jpg', '400davesrig.jpg'];
        var index = 0;
        var fade_in = document.getElementById('one');
        var fade_out = document.getElementById('two');
        // fade_in.src = images[0];
        fade_out.src = images[0];

        var fade = function() {
            fade_in.className = 'fade-out';
            fade_out.className = 'fade-in';
            setTimeout(function() {
                index = (index + 1) % images.length;
                fade_in.src = images[index];
                var fade_tmp = fade_in;
                fade_in = fade_out;
                fade_out = fade_tmp;
            }, 2000);
            setTimeout(fade, 5000);
        };
        fade();
    </script>
</body>

Answer 3

似乎你一次只显示一个图像，所以你不需要两个变量，一个会做。您只需要淡出当前图像并引入新图像：

var index = -1, count = /* total number of images */;
var image = null;

function fade() {
  if (image != null)
    image.className = 'fade-out';

  index = (index + 1) % count;
  image = document.getElementById('image-' + index);
  image.className = 'fade-in';

  setTimeout(fade, 15000);
}

fade();

这假设您已按HTML设置HTML中的所有图像：

<img id="image-0" class="fade-out" src="..." />
<img id="image-1" class="fade-out" src="..." />
<img id="image-2" class="fade-out" src="..." />
...

请注意，只有在预加载了多个图像时才能实现交叉淡入淡出，如上例所示。如果您只使用一个图像并更改源，则当您尝试淡入新图像时，上一个图像将会丢失。

在3张图像之间循环（移动Safari）

3 个答案: