Javascript 延迟模拟按钮点击

我有一个功能，当点击3个按钮中的一个时，可以在3个div之间切换（每个按钮都链接到每个div）。但我也需要该功能，以点击每一个按钮自动与4秒的延迟。我想实现一个类似于滑块的功能，可以在这3个div之间自动切换，但也可以通过按钮切换div。有可能吗？如果是，如何做到这一点？我完全是jQuery/javascript初学者，我不知道如何让它工作。 代码附在下面

$（文档）.ready（函数（）{
$（“#按钮"滑块1”）。触发器（'click'）；
$（'.btn a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
//找出要显示的幻灯片
var slideToShow=$（this.attr（'rel'）；
//隐藏当前幻灯片
$（'#header.slides.active'）.removeClass（'active'））
$（'#'+slideToShow）.addClass（'active'）；
//放映新幻灯片
});
});
.slides:未（.active）{
显示：无；
}
.btn{
浮动：左；
保证金：5px；
}
.btn p{
填充：0；
保证金：0；
文本对齐：居中；
}
您需要使用javascript设置间隔：


var inx=0，//必须单击的按钮索引
totalButtons=$（'.buttons包装器'）。查找（'div.btn'）。长度；//按钮总数
var myInterval=setInterval（点击按钮，4000）；//需要触发的函数名称，时间间隔（毫秒）
函数clickButton（）{
if（inx>=totalButtons）//检查是否超出索引
inx=0；
$（'.buttons wrapper'）.find（'.btn'）.eq（inx）.find（'a'）.first（）.trigger（'click'）；
inx=inx+1；//向索引中添加一个单元
}
这会让你一路顺利

<style>
    .toggleDiv {
        display: none;
    }
    .toggleDiv.active {
        display: block;
    }
</style>

<div id="div1" class="toggleDiv">
    <span>I'm div #1</span>
</div>

<div id="div2" class="toggleDiv">
    <span>I'm div #2</span>
</div>

<div id="div3" class="toggleDiv">
    <span>I'm div #3</span>
</div>

<button type="button" onClick="slides.toggle(0)">Toggle 1</button>
<button type="button" onClick="slides.toggle(1)">Toggle 2</button>
<button type="button" onClick="slides.toggle(2)">Toggle 3</button>

<script>
var slides = [
    document.getElementById("div1"),
    document.getElementById("div2"),
    document.getElementById("div3")
];

function Slides(slides, active) {
    this.slides = slides;
    this.activeIndex = active === 0 ? 0 : active === null ? null : active || null;
    this.slidesCount = this.slides.length;
    this.toggle = function(index) {
        if (this.activeIndex === index) {
            return this.close(index);
        }

        return this.open(index);
    };
    this.open = function(index) {
        this.activeIndex = index;
        let i;
        for (i = 0; i < this.slidesCount; i++) {
            if (this.activeIndex !== i) {
                this.slides[i].classList.remove("active");
            }
        }
        return this.slides[index].classList.add("active");
    };
    this.close = function(index) {
        this.activeIndex = null;
        return this.slides[index].classList.remove("active");
    };
console.log(this.activeIndex)
    if (this.activeIndex !== null) {
        this.slides[this.activeIndex].classList.add("active");
    }
}

var slides = new Slides(slides, 0);
</script>


.toggleDiv{
显示：无；
}
.toggleDiv.active{
显示：块；
}
我是第一组
我是第二组
我是第三组
切换1
切换2
切换3
变量幻灯片=[
document.getElementById（“div1”），
document.getElementById（“div2”），
document.getElementById（“div3”）
];
功能幻灯片（幻灯片，活动）{
this.slides=幻灯片；
this.activeIndex=active==0？0:active==null？null:active | | null；
this.slidescont=this.slides.length；
this.toggle=函数（索引）{
if（this.activeIndex==索引）{
返回此。关闭（索引）；
}
返回此。打开（索引）；
};
this.open=函数（索引）{
this.activeIndex=index；
让我；
对于（i=0；i

您可以根据需要编辑此示例


$（文档）.ready（函数（）{
$（“#幻灯片>div:gt（0）”）.hide（）；
$（'.btn'）.one（“单击”，函数（e）{
e、 预防默认值（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
}, 3000);
});
});
.btn{
浮动：左；
保证金：5px；
}
.btn p{
填充：0；
保证金：0；
文本对齐：居中；
}
#幻灯片>div{
顶部：10px；
左：10px；
右：10px；
底部：10px；
}

可以，但请先上传css类。这听起来像旋转木马。你可能会发现使用现有的旋转木马插件会给你带来一个好的结果，但它不能正常工作。当我点击任何按钮时，它会在4秒钟后将我带回第一张幻灯片。我点击哪个按钮并不重要，它总是“点击”之后的第一个按钮。此外，它在激活时不会“点亮”我的按钮（：悬停，：聚焦）。能修好吗？我刚帮你修改了密码。“：hover”和“：focus”类必须在css类定义处固定。