如何使用jQuery创建一个带有淡入淡出的照片幻灯片

在这篇文章中，我们将用jQuery fadeIn()和fadeOut()函数创建一个简单的幻灯片。

步骤:

为了实现所有图片的幻灯片效果，我们将使用JavaScript的Interval()函数。这个函数以指定的时间间隔调用一个函数或评估一个表达式，时间间隔以毫秒为单位。
fadeIn()。这个方法逐渐增加所选元素的不透明度，也就是说，它从隐藏变为可见。
fadeOut()。该方法用于淡出一个特定的元素。

例子：在下面的代码中，我们正在创建一个HTML <div>元素。并加上我们幻灯片的第一张图片。接下来，我们要添加CSS来设计我们的幻灯片。然后，我们将jQuery库加载到我们的脚本中。

我们正在使用一个数组来存储我们的幻灯片的所有图片。我们正在使用setInterval()函数与fadeIn()和fadeOut()。我们正在使用attr()方法来改变图片来源。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
        "https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
  
    <style>
        .slideshow {
            margin: auto;
            width: 60%;
            border: 3px solid #73ad21;
            padding: 10px;
        }
  
        .slideshow img {
            width: 100%;
            height: 100%;
        }
    </style>
      
    <script>
        (document).ready(function () {
            var pic =("img:first");
            var images = [
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182827/img1.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182923/img2.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182952/img3.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629183022/img4.jpg",
            ];
  
            var i = 0;
            setInterval(function () {
  
                // Returns 0, 1, 2, 3, 0, 1, 2, ....
                i = (i + 1) % images.length;
                pic.fadeOut(250, function () {
                    (this).attr("src", images[i]);
                    (this).fadeIn(1050);
                });
            }, 5000);
        });
    </script>
</head>
  
<body>
    <div class="slideshow">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182827/img1.jpg" />
    </div>
</body>
  
</html>