极客教程JavaScript 实现具有渐变效果的图像过渡
图像过渡意味着改变图像，用一个图像替换另一个图像。用户可以在图像滑块中看到图像过渡。
在开发图像滑块时，我们应该把重点放在图像过渡的动画上，以使应用程序的用户体验更具吸引力。在本教程中，我们将学习如何使用各种方法为图像过渡添加渐变效果。
给图像添加类，以显示具有渐变效果的图像
我们可以使用CSS来为图像过渡添加渐变效果。CSS的过渡属性允许我们为图像添加任何过渡。因此，我们可以在一个类上添加CSS，使用JavaScript，我们可以在图像上添加一个类，这将为图像添加一个过渡效果
语法
用户可以按照下面的语法为图像添加一个类，以显示一个具有渐变效果的图像。
document.getElementById("image").classList = 'class_name';
在上面的语法中，我们使用id访问图片，并将’class_name’类添加到图片的类列表中。
例子
在下面的例子中，我们在网页上添加了一张图片，并使用一些CSS给图片添加了高度和宽度。此外，我们还在img类中添加了不透明度为0的值。
此外，我们还在animate类中添加了 “过渡 “和 “不透明度 “属性。最初，图像并不包含’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);
}
在上面的语法中，current变量记录了要在网页上显示的图像。我们使用fadeIn()方法显示当前图片，并隐藏所有其他图片。
操作步骤
第1步 - 使用它们的类名访问所有图像。
第2步 - 使用for-loop遍历所有图像，并使用图像的display属性隐藏所有图像，除了第一个图像。
第3步 - 创建一个名为’current’的变量，并将其初始化为0。
第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给元素添加了一个背景图片，并给背景添加了’transition’。每当我们用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的 “过渡 “属性。