Javascript 自动播放点导航jquery setInterval

我想每隔5秒自动将活动类添加到每个li标记和 这是我想到的唯一一个算法。它不能很好地工作。请帮我解决这个问题

在follow中设置css样式

       .dots{
            text-align: center;
            background: blue;
        }
        .dots ul{
            padding:0;
            margin:0;
        }
        .dot{
            width:10px;
            height:10px;
            background:white;
            border-radius:50%;
            display:inline-block;
            cursor:pointer;
            margin:0 3px;
        }
        .dots ul .active{
            background:black;
        }

<div class="dots">
        <ul>
            <li class="dot active"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
</div>

<script>
        $(function(){
            setInterval(function(){
                var n = 1;
                $('.dots ul li:nth-child(n)').removeClass('active');
                $('.dots ul li:nth-child(2)').addClass('active');
            }, 5000);
        });
</script>

html标记在follow中

       .dots{
            text-align: center;
            background: blue;
        }
        .dots ul{
            padding:0;
            margin:0;
        }
        .dot{
            width:10px;
            height:10px;
            background:white;
            border-radius:50%;
            display:inline-block;
            cursor:pointer;
            margin:0 3px;
        }
        .dots ul .active{
            background:black;
        }

<div class="dots">
        <ul>
            <li class="dot active"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
</div>

<script>
        $(function(){
            setInterval(function(){
                var n = 1;
                $('.dots ul li:nth-child(n)').removeClass('active');
                $('.dots ul li:nth-child(2)').addClass('active');
            }, 5000);
        });
</script>

follow中的jquery语句

       .dots{
            text-align: center;
            background: blue;
        }
        .dots ul{
            padding:0;
            margin:0;
        }
        .dot{
            width:10px;
            height:10px;
            background:white;
            border-radius:50%;
            display:inline-block;
            cursor:pointer;
            margin:0 3px;
        }
        .dots ul .active{
            background:black;
        }

<div class="dots">
        <ul>
            <li class="dot active"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
</div>

<script>
        $(function(){
            setInterval(function(){
                var n = 1;
                $('.dots ul li:nth-child(n)').removeClass('active');
                $('.dots ul li:nth-child(2)').addClass('active');
            }, 5000);
        });
</script>

$（函数（）{
setInterval（函数（）{
var n=1；
$（'.dots ul li:n个子项（n）'）.removeClass（'active'）；
$（'.dots ul li:nth child（2）'）.addClass（'active'）；
}, 5000);
});

变量n必须在setInterval循环之外定义。每个周期的增量n（例如++n）。这是文本字符串-$（'.dots ul li:nth child（n）'）。例如，将数字n从文本中移开

$('.dots ul li:nth-child(' + n + ')')

或

修改后的函数将如下所示：

   $(function(){
        var n = 0;
        setInterval(function(){
            $('.dots ul li').eq(n).addClass('active').siblings().removeClass('active');
            if (++n >= $('.dots ul li').length) n = 0;
        }, 5000);
    });