jquery - 任何人都可以为新手提供一个简单的淡入淡出幻灯片 jquery 脚本吗？-6ren

jquery - 任何人都可以为新手提供一个简单的淡入淡出幻灯片 jquery 脚本吗？

转载作者：太空宇宙更新时间：2023-11-03 18:37:25

有没有人对如何制作简单的幻灯片有任何建议？我当前的图像不稳定，我只是希望它能简单地淡出到下一张图像。

我正在使用下面的代码在 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;}

最佳答案

首先尝试“ 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 响应时间问题......