Javascript 在3个图像之间循环（移动Safari）_Javascript

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

javascript

Javascript 在3个图像之间循环（移动Safari）,javascript,Javascript,我有以下javascript。当我在两个图像之间循环时，它工作得很好，但当我添加第三个图像时，它不能正常工作这是我的CSS： img { -webkit-transition-property: opacity; -webkit-transition-duration: 2s; position: absolute; width: 320px; height: auto; } img.fade-out { opacity: 0; } img.

我有以下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>


var images=['Wallpaper.png'，'wallper0.png'，'wallper1.png']；
var指数=0；
var fade_in=一；
var fade_out=两个；
var fade_foo=三个；
fade_in.src=图像[0]；
fade_out.src=images[images.length-1]；
var fade=函数（）{
fade_in.src=图像[索引]；
索引=（索引+1）%images.length；
淡入淡出类名称='fade out'；
fade_out.className='fade in'；
fade_foo.className='fade out'；
var fade_tmp=淡入；
淡入=淡出；
淡出=淡出；
淡入淡出=淡入淡出tmp；
设置超时（衰减，15000）；
};
褪色（）；

首先，您没有更改淡出.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);
};

因为我不知道您到底在做什么，所以无法透露更多信息。

在交换源代码之前，您不会等待转换完成。我们只需要重新安排事情的顺序

    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>

看起来一次只显示一个图像，所以不需要两个变量，一个就可以了。您只需淡出当前图像并引入新图像：

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格式，如下所示：

<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个图像循环。我很抱歉说不清楚。我的目标是在没有我信任的朋友“jQuery”的情况下完成这项工作：）它只需要为移动Safari工作（这是我为iPhone编写的主题）OP说他正在对图像进行交叉淡色，因此，您不需要等待转换完成。@casablanca他必须等待传出图像不可见，然后再交换源，否则将加载新图像并立即淡出，这是没有意义的。我假设他已经预加载了图像。否则就不可能交叉淡入淡出。据我所知，var images=['wallpar.png'、'wallper0.png'、'wallper1.png'；完成预加载，但我很可能是不正确的。@nerbles仅创建一个带有文件名的数组不会预加载任何内容，但是设置不可见元素的源应该解决这个问题。这不是你最初的问题。我数组中的图像是实际的文件名。Wallpaper.png、wallper0.png和wallper1。png@nerbles：我已经更新了我的答案，如果您不介意将所有图像放入HTML代码中，这应该可以使用。我已经更新了原始帖子中代码的第二个版本，以将图像合并到HTML中。谢谢。@nerbles：你也尝试过我发布的JavaScript吗？这个解决方案很有效。尽管我不得不添加setTimeout（fade，15000）；我编辑了我的原始帖子，以显示几乎全部内容（不包括css）。我想做的就是用淡入淡出的方式在3幅图像中循环。每次迭代只需更改一个元素的源-在这种情况下，它总是（将是）不可见的元素。