使用JavaScript实现图像淡入淡出的过渡效果

图像过渡意味着更换图像并用另一个图像替换。用户可以在图像幻灯片中看到图像过渡效果。

在开发图像幻灯片时，我们应该把重点放在图像过渡的动画上，以使应用程序的用户体验更加吸引人。在本教程中，我们将学习使用各种方法添加淡入淡出效果来实现图像过渡。

为图像添加类以显示具有淡入淡出效果的图像

我们可以使用CSS为图像过渡添加淡入淡出效果。CSS的transition属性允许我们为图像添加任何过渡效果。因此，我们可以为一个类添加CSS，然后使用JavaScript为图像添加一个类，这将为图像添加一个过渡效果。

语法

用户可以按照以下语法为图像添加类，以显示具有淡入淡出效果的图像。

document.getElementById("image").classList = 'class_name';

在上面的语法中，我们使用id访问图像，并将’class_name’类添加到图像的类列表中。

示例

在下面的示例中，我们在网页中添加了一张图片，并使用一些CSS为图片指定了高度和宽度。此外，我们在img类中添加了一个值为0的不透明度。

同时，我们还在animate类中添加了’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);
}

在上述语法中，current变量跟踪要显示在网页上的图像。我们使用fadeIn()方法显示当前图像，并隐藏所有其他图像。

步骤

步骤1 - 使用类名称访问所有图像。

步骤2 - 使用for循环遍历所有图像，并使用图像的display属性隐藏除第一个图像外的所有图像。

步骤3 - 创建一个名为“current”的变量，并将其初始化为零。

步骤4 - 创建一个startImageTrans()函数，并在其中使用setInterval()方法，在每3500毫秒后调用fade()函数。但是，用户可以根据自己的要求设置时间间隔。

步骤5 - 在fade()函数内部，使用JQuery的eq()方法访问当前子级。使用fadeout()方法隐藏当前图像。

步骤6 - 将current变量的值增加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的images数组。我们使用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’属性。