<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .slide { }
        .slide a{ 
            position: absolute;
            width:100%;
            height:500px;
        }

        .a1{
            background-color:deeppink;
        }

        .a2{
            background-color:dodgerblue
        }

        .a3{
            background-color: greenyellow;
        }

    </style>
    <title>Document</title>
</head>
<body>
    

    <div class="imgSlide">
        <a href="#" class="a1">11111</a>
        <a href="#" class="a2">22222</a>
        <a href="#" class="a3">33333</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>

        $('.imgSlide a').hide().eq(0).show();

       var i = 0;
       
       setInterval(function(){

        var ns = (i+1) % 3;    
        console.log(ns,i);

    
    
        $('.imgSlide a').eq(ns-1).fadeOut();
        $('.imgSlide a').eq(ns).fadeIn();
        
            i++;
        
        },1000)
    </script>
</body>
</html>