1

有人对如何制作简单的幻灯片有任何建议吗？我当前的一个不稳定，我只是在寻找它以简单地淡入下一个图像。

我正在使用下面的代码在我的主页上自动播放我的幻灯片和用于淡入淡出的 css。褪色开始时非常生涩/波涛汹涌。我不确定是什么原因造成的。

<script  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    window.setInterval(slideClick, 5000);

    function slideClick() {
     $(".slide").click();
    }
    </script>

.slide {    
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;}
4

1 回答 1

0


首先尝试“预加载”图像，以获得更直接的图像处理：

// this variable is used in both code-snippets:
var images = $("img");

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $("<img/>")[0].src = this;
    });
}

preload($("img"));


...然后您可以使用 javascriptsetTimeout和 jQueryfadeIn()和转换图像fadeOut()：

var currentIndex = images.length;
var delay = 4000;

(function transitionImages() {
    // fading the current image out:
    images.eq(currentIndex).fadeOut(delay);

    var previousIndex = currentIndex;
    while (currentIndex == previousIndex) {
        // setting a new unique index here:
        currentIndex = Math.floor(Math.random() * images.length);
    }

    // fading the next image in:
    images.eq(currentIndex).fadeIn(delay / 2);

    // recursive timeout here:
    setTimeout(transitionImages, delay);
})(); // end of immediately-invoked function expression ("IIFE")


我很难让它在页面加载时准确启动，但我认为这是因为我的图像太大了哈，所以一定要尝试使用较小的图像。

尝试为 和 设置不同的延迟时间fadeIn，fadeOut但请注意，它有时会导致图像渲染出现故障。

此外，这是一个很好的答案，解释了为什么setTimeout比setInterval.


更新：
似乎预加载图像应该在本<head>节的末尾完成，但是在尝试使用大型和/或大量图像的动画时，我仍然遇到 jQuery 响应时间问题......

于 2014-01-12T23:27:39.107 回答