图像转换意味着更改图像并将一张图像替换为另一张图像。用户可以在图像滑块中看到图像过渡。
在开发图像滑块时，我们应该关注图像过渡的动画，以使应用程序具有有吸引力的用户体验。在本教程中，我们将学习使用各种图像过渡方法添加淡入淡出效果。
为图像添加类以显示具有淡入淡出效果的图像
我们可以使用 CSS 为图像过渡添加淡入淡出效果。 CSS 的过渡属性允许我们向图像添加任何过渡。因此，我们可以将 CSS 添加到一个类，并使用 JavaScript，我们可以将一个类添加到图像，这将为图像添加一个过渡
语法
用户可以按照下面的语法向图像添加一个类，以显示具有淡入淡出效果的图像。
立即学习“Java免费学习笔记（深入）”；
document.getElementById("image").classList = 'class_name';
在上面的语法中，我们使用 id 访问图像并将“class_name”类添加到图像的类列表中。
示例
在下面的示例中，我们向网页添加了图像，并使用一些 CSS 给图像指定了高度和宽度。此外，我们还在 img 类中添加了值为 0 的不透明度。
此外，我们还向动画类添加了“transition”和“opacity”属性。最初，图像不包含“animate”类。当用户单击该按钮时，它会执行 FadeIn() 函数，将“animate”类添加到图像中。
在输出中，我们可以观察到当我们添加“animate”类时图像会淡入。
Using the class to add fadding effect in image transition
使用 jQuery 的 fadeIn() 和 fadeout() 方法为图像添加淡入淡出过渡
JQuery的fadeout()方法允许我们以淡入淡出的效果从网页中删除图像。 fadeIn() 方法允许我们向网页添加具有淡入淡出效果的图像。
在这里，我们将使用 fadeout() 和 fadeIn() 方法为图像过渡添加适当的淡入淡出效果。
语法
用户可以按照以下语法使用JQuery的fadeout()和fadeIn()方法为图像过渡添加淡入淡出效果。
setInterval(fade, 3500);
function fade() {
$("#slider img").eq(current).fadeOut(0);
current = ++current % images.length;
$("#slider img").eq(current).fadeIn(2000);
}
在上面的语法中，当前变量跟踪要在网页上显示的图像。我们使用 fadeIn() 方法显示当前图像并隐藏所有其他图像。
步骤
第 1 步 – 使用类名访问所有图像。
第 2 步 – 使用 for 循环迭代所有图像，并使用图像的 display 属性隐藏除第一张图像之外的所有图像。
第 3 步 – 创建一个名为“current”的变量并将其初始化为零。
步骤 4 – 创建一个 startImageTrans() 函数，并使用其中的 setInterval() 方法在每 3500 毫秒后调用 fade() 函数。不过，用户可以根据自己的需要设置时间间隔
步骤 5 – 在 fade() 函数内，使用 JQuery 的 eq() 方法访问当前子级。使用 fadeout() 方法隐藏当前图像。
第6步 – 将当前变量的值增加1，如果它大于图像总数，则将其设置为0。
第 7 步 – 使用 fadeIn() 方法显示当前图像。
示例
在下面的示例中，我们创建了 HTML div 元素并添加了五个不同的图像。我们在 JavaScript 中对所有图像一一实现了上述算法，并具有淡入淡出过渡效果。
Using the jQuery fadeIn() method to add fadding effect in image transition
使用 CSS 过渡属性为图像过渡添加淡入淡出效果
在这种方法中，我们将为 HTML 元素设置背景图像。此外，我们将为 HTML 元素的背景添加淡入淡出过渡。所以，每当我们改变背景时，它就会出现淡入淡出的效果。
语法
用户可以按照以下语法使用 CSS 过渡属性为背景图像添加淡入淡出效果。
function FadeImage() {
imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}
我们使用上述语法中的 CSS 向元素添加了背景图像，并“过渡”到背景。每当我们使用 JavaScript 更改背景图像时，它都会自动将淡入淡出过渡应用于图像。
示例
在下面的示例中，div 元素包含初始背景图像。我们创建了包含不同背景图像的 URL 的图像数组。我们使用 setInterval() 方法每 3000 毫秒调用 fadeInImage() 函数。
在 fadeInImage() 函数中，我们反复更改背景图像，当图像更改时，会使用 CSS 进行淡入淡出过渡。
Using the CSS transition to add fadding effect in image transition
我们学习了三种为图像过渡添加淡入淡出效果的方法。我们在第二种方法中使用了 JQuery 的 fadeIn() 和 fadeout() 方法，在第一种和第三种方法中使用了 CSS 的“transition”属性。
