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

在本文中，我们将使用 jQuery淡入（）和淡出（）函数创建一个简单的幻灯片。

方法：

• 对于所有图像的幻灯片效果，我们将使用 JavaScript setInterval()函数。此函数以指定的时间间隔调用函数或计算表达式，以毫秒为单位。
• 淡入（）：此方法逐渐增加所选元素的不透明度，即它从隐藏变为可见。
• 淡出（）：此方法用于淡出特定元素。

示例：在下面的代码中，我们使用幻灯片的第一张图片创建一个 HTML

元素。接下来，我们将添加 CSS 来设置幻灯片的样式。然后，我们将 jQuery 库加载到我们的脚本中。

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

HTML

  

    
    
  
    
        .slideshow {
            margin: auto;
            width: 60%;
            border: 3px solid #73ad21;
            padding: 10px;
        }
  
        .slideshow img {
            width: 100%;
            height: 100%;
        }
    
      
    
        $(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);
        });
    

  

    
        
    

  

输出：