Question

有没有人对如何制作简单的幻灯片有任何建议？我目前的一个是不稳定的，我只是想把它简单地淡化到下一个图像。

我正在使用以下代码在my homepage上自动播放我的幻灯片，以及用于淡入淡出的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;}

Answer 1

首先尝试“ pre-loading ”图像，以便更直接地处理图像：

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

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

preload($("img"));

...然后你可以使用javascript的setTimeout和jQuery的fadeIn()和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的不同延迟时间，但请注意，它有时会导致图像渲染出现故障。

此外，here's a good answer解释了为什么setTimeout优于setInterval。

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

任何人都可以为菜鸟提供简单的淡入淡出幻灯片jquery脚本吗？

1 个答案: