JavaScript 图像淡入淡出

• 下载源代码和演示页面 - 37.1 KB 

引言

"此代码允许您在网页上轻松设置图片的淡入淡出效果。如今，在网站页面侧边栏看到最新的图片列是很常见的。然而，并没有代码能够真正实现图片的淡入淡出。因此，在这篇文章中，我将介绍：一些简单的 JavaScript 代码，可以集成到任何网站中来实现图片的淡入淡出。" 

自我的第一篇文章版本以来，情况不再如此。正如有人很久以前指出的，jQuery 提供了非常好的对象动画方法，包括图片的淡入淡出。因此，这个新版本的文章，可能已经延迟了很长时间，现在使用 jQuery 来实现淡入淡出。

更新至 jQuery

要更新到我代码的 jQuery 版本，只需下载文件，然后将脚本引用（在网页的 head 标签中）指向 jQuery-1.7.2.min.js 文件和 ImageFader_jQuery.min.js 文件。这些就是您所需的一切（除了一些图片和网页）来使用我的代码。包含注释的完整代码版本也包含在下载文件中。 

注意：我的代码不需要 jQuery UI 库。

注意：我的代码很可能适用于旧版本的 jQuery 库，尽管我强烈建议您保持更新。我发现 jQuery 在向后兼容性方面做得很好，所以升级不是问题，只需覆盖 jQuery JS 文件即可完成。 

通过更新到使用 jQuery，代码现在变得跨浏览器兼容性可靠，并且具有更好的向后兼容性 - 换句话说，它在 IE7 及以上版本中都能可靠运行！ " /> 它还具有更准确可靠的计时，因为 jQuery 在延迟和淡入淡出方面做得更好。最后，jQuery 提供了更简单（一旦您理解了 jQuery 语法，这并不难），代码更短，意味着为您的访问者提供更小的下载量，并且更容易修改我的代码。 

使用代码 

代码的使用非常简单。像其他脚本一样，在 head 中添加提供的 ImageFader_jQuery.min.js 文件和 jQuery-1.7.2.min.js。在旧版本中，您需要为 onload 事件添加一个处理程序，但现在代码使用 jQuery，它会自动处理 ready 事件。 

设置图片 并开始淡入淡出 

所以您首先要做的是选择要使用的图片。嗯，这可以通过以下两个简单的步骤完成（而且现在更可靠）。 

1. 在代码中，找到名为 ImagesFolderURL 的变量。将其设置为您的图片文件夹的根相对 URL（使用 URL 编码）。不要包含开头或结尾的斜杠。 

注意：为了兼容 Chrome 和其他浏览器，所有 URL 都必须进行 URL 编码。 

2. 现在找到 ready 事件处理程序。它看起来会像这样： 

$(document).ready(function ()
{
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Carribean-Beach.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Red-Dream-Swirls.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Space.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Swirls-Of-Fire.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Purple-Starry-Hearts.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Blue-Cells.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/Blue-Cells-2.jpg";
    FileNames[FileNames.length] = ExtraPath + "Backgrounds/water-008.jpg";

    //FadeImage(ElementId, Delay before starting first fade)
    FadeImage('Image1', 0);
    FadeImage('Image2', 1000);
    FadeImage('Image3', 2000);
    FadeImage('Image4', 3000);
}); 

所以这个事件处理程序做了两件事。它将所有图片的路径添加到文件名列表中，并开始图片的淡入淡出。首先看设置文件名，您应该使用以下代码行，替换为您图片的 URL（URL 相对于您上面设置的图片文件夹）。 

FileNames[FileNames.length] = ExtraPath + "Backgrounds/Carribean-Beach.jpg"; 

现在，要设置图片的淡入淡出，只需在底部的 ready 事件处理程序中添加/替换 FadeImage 调用即可。 

FadeImage(/*ElementId*/, /*Delay before starting first fade - in milliseconds!*/);

设置淡入淡出速度、显示/隐藏时间以及透明度级别 

找到以下代码行并更改值以达到您想要的结果： 

//Value of opcity range 0 to 1
var MaxOpacity = 1.0;
var MinOpacity = 0.0;

//Time to take to fade the images - in milliseconds!
var FadeSpeed = 2000;
//Time to display the images for - in milliseconds!
var DisplayTime = 8000;
//Time to hide the images for - in milliseconds!
var HideTime = 0; 

• MaxOpacity 是您希望淡入到的最高透明度级别。必须在 0 到 1 之间，最多两位小数。
• MinOpacity 是您希望淡入到的最低透明度级别。必须在 0 到 1 之间，最多两位小数。它也必须小于 MaxOpacity。
• FadeSpeed 是以毫秒为单位的淡出或淡入所需时间。我将其设置为 2,000，这是一个相当快的淡入淡出，如果您有一列淡入淡出的图片，效果很好。 
• DisplayTime 是图片完全透明淡入后到下一次淡出开始之间的时间长度（以毫秒为单位）。
• HideTime 是图片完全透明淡出后到下一次淡入开始之间的时间长度（以毫秒为单位）。  

淡入淡出图片 方法 

新版本包含一个 FadeImage 方法，它负责淡入淡出图片并循环淡入淡出。您可能会问，为什么还需要它，因为 jQuery 已经提供了淡入淡出功能，但是！jQuery 不会为您处理循环，也不会允许淡入到特定级别（至少默认情况下不会），也不会处理隐藏时间、显示时间和初始延迟时间等。该方法如下所示： 

//Handles fading an image in and out
function FadeImage(Tag, Delay, NextOpacity)
{
    //If the NextOpacity is undefined, this is the first call and so do some setup
    if (NextOpacity === undefined)
    {
        //Load initial file indexes to prevent duplicates showing on first change
        var FileName = $("#" + Tag).attr("src");
        for (var i = 0; i < FileNames.length; i++)
        {
            if (FileNames[i].indexOf(FileName) > 0)
            {
                Files[Tag] = i;
                break;
            }
        }

        //Default opacity for elements is 1 so test if it's specifically set to 0
        if (parseFloat($("#" + Tag).css("opacity")) == 0)
        {
            NextOpacity = MaxOpacity;
        }
        else
        {
            NextOpacity = MinOpacity;
        }
    }
    //Is the next fade going to be a fade out
    var FadeOut = NextOpacity == MinOpacity;
    
    //If Delay were 0, it would be the same as null in the code Delay || ...
    if (Delay == 0)
        Delay = 1;

    //Get the image tag (by id so we need to add the hash symbol)
    $("#" + Tag)
        //Delay either the specified delay time (i.e. initial delay time) or hide/display time based on
    //fade in or out
        .delay(Delay || (FadeOut ? DisplayTime : HideTime))
        //Animate the image to fade to the next opacity
        //Uses the FadeSpeed and Linear easing. Function is the completed callback
        .animate({ opacity: NextOpacity }, FadeSpeed, "linear", function ()
    {
        //Runs when the fade is complete

        //If this is a fade out
        if (FadeOut)
            //Then now the image is hidden, load the next image
            $(this).attr("src", FileNames[Files[Tag] = GetNextFile(Tag)]);
        //And call FadeImage again to fade to do the next fade.
        //Since calls to delay/animate are (async) non-blocking calls,
        //this will return almost instantly. You don't end up with massive
        //call stacks as one may presume!
        FadeImage(Tag, null, FadeOut ? MaxOpacity : MinOpacity)
    });
} 

这是如何工作的？

嗯，第一个主要部分是方法第一个“if”块中包含的初始设置代码。 当页面首次加载时，您可能已经设置了图片的初始 URL - 建议这样做，以便整个页面在加载时看起来更美观。因此，用户已经看到了这些图片。为了防止它们立即被重新显示（并满足无重复的规范），代码将这些初始值加载到 Files 数组中。然后，由于图片可能最初是隐藏的，我们检查是否需要淡入，并据此进行设置。

下一部分是确定这是否是淡出调用，只需检查我们是否即将淡入到 MinOpacity 或不是，以及用于检查 Delay 的“if”块。 在 JavaScript 中，我们可以使用 x || y 来表示“如果 x 存在，则使用 x，否则使用 y”。不幸的是，此运算符将“0”视为不存在，因此稍后会使用 y 而不是我们的 Delay 对象，这就是为什么，如果 Delay 为零，我们会将其设置为一。Delay 以毫秒为单位，因此这 1 毫秒的额外延迟不会被察觉。 

接下来，我们使用 jQuery 来获取我们的元素。由于 jQuery 使用 CSS 规范来标识元素，我们在 ID 前面添加了一个哈希符号。然后，我们调用 delay 方法。这是非阻塞的，只是在当前对象的 effects queue 中排队一个延迟，这就是 FadeImage 方法的递归能够工作而无需 eval 或 setTimeout 的原因。 如果 delay 和 animate 方法是阻塞的，我们将得到一个很大的调用堆栈，最终会导致错误。 传递给 delay 方法的延迟时间由以下决定：

如果设置了 Delay，我们就使用它。 
如果未设置 Delay 并且是淡出，我们应该在淡出之前延迟 DisplayTime。 
否则，这是淡入，我们应该在淡入之前延迟 HideTime。 

所有这些的代码？一个简洁的单行：  Delay || (FadeOut ? DisplayTime : HideTime) 

最后，我们调用 animate，将 NextOpacity 级别作为要动画化的 CSS 属性，FadeSpeed，一个“linear”的缓动函数，最后是一个回调函数，允许我们调用下一个淡入淡出。回调函数然后检查是否需要选择新图片，然后以零延迟时间调用下一个淡入淡出，并根据下一个是淡入还是淡出正确地设置下一个透明度。

获取下一个文件方法

这只是返回 FileNames 数组中下一个要显示的图片的索引。 它确保（几乎）从不显示重复项，并且连续显示相同的图片。应该注意的是，此方法可能会永远不返回文件名 ，但这种情况发生的实际概率非常低，不值得担心。 

兴趣点 

从初始版本中一些值得注意的点是：setTimeout 函数不准确；浮点数会迅速累积越来越严重的浮点误差，并且 IE 和 Opera 的 JavaScript 运行速度比其他三个主要浏览器慢很多。