图像转换意味着更改图像并将一张图像替换为另一张图像。用户可以在图像滑块中看到图像过渡。
在开发图像滑块时，我们应该关注图像过渡的动画，以使应用程序具有有吸引力的用户体验。在本教程中，我们将学习使用各种图像过渡方法添加淡入淡出效果。
为图像添加类以显示具有淡入淡出效果的图像我们可以使用 css 为图像过渡添加淡入淡出效果。 css 的过渡属性允许我们向图像添加任何过渡。因此，我们可以将 css 添加到一个类，并使用 javascript，我们可以将一个类添加到图像，这将为图像添加一个过渡
语法用户可以按照下面的语法向图像添加一个类，以显示具有淡入淡出效果的图像。
document.getelementbyid(image).classlist = 'class_name';
在上面的语法中，我们使用 id 访问图像并将“class_name”类添加到图像的类列表中。
示例在下面的示例中，我们向网页添加了图像，并使用一些 css 给图像指定了高度和宽度。此外，我们还在 img 类中添加了值为 0 的不透明度。
此外，我们还向动画类添加了“transition”和“opacity”属性。最初，图像不包含“animate”类。当用户单击该按钮时，它会执行 fadein() 函数，将“animate”类添加到图像中。
在输出中，我们可以观察到当我们添加“animate”类时图像会淡入。
<html><head> <style> img { opacity: 0; } .animate { -webkit-transition: 2s; transition: 2s; opacity: 1; } </style></head><body> <h2> using the <i> class </i> to add fadding effect in image transition </h2> <img id = image style = width: 500px; height: 200px; src = https://www.tutorialspoint.com/static/images/logo-color.png alt = logo image> <br> <button type = button onclick = fadein()> fade in image </button> <script> function fadein() { document.getelementbyid(image).classlist = 'animate'; } </script></body></html>
使用 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 中对所有图像一一实现了上述算法，并具有淡入淡出过渡效果。
<html><head> <script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js></script> <style> img { height: 200px; width: 500px; } </style></head><body> <h3> using the <i> jquery fadein() method </i> to add fadding effect in image transition </h3> <div id=slider> <img src = https://www.tutorialspoint.com/static/images/logocolor.png class = sliderimage alt = image 1> <img src =https://www.tutorialspoint.com/images/trending_categories.svg class = sliderimage alt = image 2> <img src = https://www.tutorialspoint.com/images/data-structure.png class = sliderimage alt = image 3> <img src = https://www.tutorialspoint.com/images/javascript.png class = sliderimage alt = image 4> </div> <br> <br> <button type = button onclick = startimagetrans()> start image transitions </button> <script> let images = document.queryselectorall('.sliderimage'); for (let i = 0; i < images.length; i++) { if (i != 0) images[i].style.display = none; } var current = 0; function startimagetrans() { setinterval(fade, 3500); } function fade() { // hide the previous image with fading effect $(#slider img).eq(current).fadeout(0); current++; current = current % images.length; // show a current image with fading effect $(#slider img).eq(current).fadein(2000); } </script></body></html>
使用 css 过渡属性为图像过渡添加淡入淡出效果在这种方法中，我们将为 html 元素设置背景图像。此外，我们将为 html 元素的背景添加淡入淡出过渡。所以，每当我们改变背景时，它就会出现淡入淡出的效果。
语法用户可以按照以下语法使用 css 过渡属性为背景图像添加淡入淡出效果。
<style>#background-div { background-image: url(image_url); transition: background 2s linear;}</style>function fadeimage() { imagediv.style.backgroundimage = `url(${allimages[current]})`;}
我们使用上述语法中的 css 向元素添加了背景图像，并“过渡”到背景。每当我们使用 javascript 更改背景图像时，它都会自动将淡入淡出过渡应用于图像。
示例在下面的示例中，div 元素包含初始背景图像。我们创建了包含不同背景图像的 url 的图像数组。我们使用 setinterval() 方法每 3000 毫秒调用 fadeinimage() 函数。
在 fadeinimage() 函数中，我们反复更改背景图像，当图像更改时，会使用 css 进行淡入淡出过渡。
<html><head> <style> #background-div { background-position: center; background-size: cover; background-image: url(https://www.tutorialspoint.com/images/trending_categories.svg); display: flex; height: 300px; width: 600px; transition: background 2s linear; } </style></head><body> <h3>using the <i> css transition </i> to add fadding effect in image transition</h3> <div id = background-div></div> <script> let allimages = [ https://www.tutorialspoint.com/images/trending_categories.svg, https://www.tutorialspoint.com/javascript/images/javascript-minilogo.jpg, https://www.tutorialspoint.com/css/images/css-mini-logo.jpg, ] const imagediv = document.getelementbyid(background-div); setinterval(fadeimage, 3000); let current = 0; function fadeimage() { current++; if (current >= allimages.length) current = 0; imagediv.style.backgroundimage = `url(${allimages[current]})`; } </script></body></html>
我们学习了三种为图像过渡添加淡入淡出效果的方法。我们在第二种方法中使用了 jquery 的 fadein() 和 fadeout() 方法，在第一种和第三种方法中使用了 css 的“transition”属性。
以上就是使用 javascript 实现具有淡入淡出效果的图像过渡的详细内容。