Javascript 如何使JS滑块每三秒钟自动播放一次

这里是一个简单的JS滑块，它有一个“上一步”和“下一步”按钮来更改幻灯片。我想添加一个额外的功能，即使用“上一步”和“下一步”按钮自动播放

我尝试了

.setInterval（函数（）{/*每三秒*/}，3000）

到

.getElementById（'button-next'）

从jQuery

$（“#按钮下一步”）触发。单击（）

它正在工作，但问题是，当我更改浏览器选项卡并在一段时间后返回滑块选项卡时，它将完成所有挂起的
$（“#按钮下一步”）。单击（）立即持续破坏我的滑块效果

我怎样才能解决这个问题


$（文档）.ready（函数（）{
$（'.sp'）.first（）.addClass（'active'）；
$（'.sp'）.hide（）；
$（'.active'）.show（）；
$（“#按钮下一步”）。单击（函数（）{
$（'.active'）.removeClass（'active'）.addClass（'oldActive'）；
如果（$（'.oldActive'）。是（':last child'））{
$（'.sp'）.first（）.addClass（'active'）；
}否则{
$（'.oldActive'）.next（）.addClass（'active'）；
}
$（'.oldActive'）.removeClass（'oldActive'）；
$（'.sp'）.fadeOut（）；
$（'.active'）.fadeIn（）；
});
$（“#按钮上一页”）。单击（函数（）{
$（'.active'）.removeClass（'active'）.addClass（'oldActive'）；
如果（$（'.oldActive'）。是（':first child'））{
$（'.sp'）.last（）.addClass（'active'）；
}否则{
$（'.oldActive'）.prev（）.addClass（'active'）；
}
$（'.oldActive'）.removeClass（'oldActive'）；
$（'.sp'）.fadeOut（）；
$（'.active'）.fadeIn（）；
});
});
正文{
字体大小：12px；
字体系列：“Verdana”；
}
#页面包装器{
保证金：0自动；
位置：相对位置；
宽度：500px；
}
#滑块包装器{
宽度：300px；
高度：200px；
}
#滑块{
宽度：300px；
高度：200px；
位置：相对位置；
}
.sp{
宽度：300px；
高度：200px；
位置：绝对位置；
字体大小：20px；
颜色：#fff；
}
#导航{
边缘顶部：20px；
宽度：50%；
}
#上一个按钮{
浮动：左；
光标：指针；
}
#下一步按钮{
左边距：250px！重要；
光标：指针；
}

1.
2.
3.
4.
上
下一个
试试这个解决方案
“上一步”和“下一步”按钮正在工作


$（'.sp'）.first（）.addClass（'active'）；
$（'.sp'）.hide（）；
$（'.active'）.show（）；
$（“#按钮下一步”）。单击（函数（）{
$（'.active'）.removeClass（'active'）.addClass（'oldActive'）；
如果（$（'.oldActive'）。是（':last child'））{
$（'.sp'）.first（）.addClass（'active'）；
}否则{
$（'.oldActive'）.next（）.addClass（'active'）；
}
$（'.oldActive'）.removeClass（'oldActive'）；
$（'.sp'）.fadeOut（）；
$（'.active'）.fadeIn（）；
});
$（“#按钮上一页”）。单击（函数（）{
$（'.active'）.removeClass（'active'）.addClass（'oldActive'）；
如果（$（'.oldActive'）。是（':first child'））{
$（'.sp'）.last（）.addClass（'active'）；
}否则{
$（'.oldActive'）.prev（）.addClass（'active'）；
}
$（'.oldActive'）.removeClass（'oldActive'）；
$（'.sp'）.fadeOut（）；
$（'.active'）.fadeIn（）；
});
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“sp”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，2000年）；
}
正文{
字体大小：12px；
字体系列：“Verdana”；
}
#页面包装器{
保证金：0自动；
位置：相对位置；
宽度：500px；
}
#滑块包装器{
宽度：300px；
高度：200px；
}
#滑块{
宽度：300px；
高度：200px；
位置：相对位置；
}
.sp{
宽度：300px；
高度：200px；
位置：绝对位置；
字体大小：20px；
颜色：#fff；
}
#导航{
边缘顶部：20px；
宽度：50%；
}
#上一个按钮{
浮动：左；
光标：指针；
}
#下一步按钮{
左边距：250px！重要；
光标：指针；
}

1.
2.
3.
4.
上
下一个
步骤1-将“下一步”功能移动为独立功能
第2步-每3秒使用一次此功能。
第3步-为了防止返回到选项卡后出现故障，只需添加对
文档的检查。visibilityState=='visible'
典型的情况是使用setInterval，如下所示：


$（文档）.ready（函数（）{
$（'.sp'）.first（）.addClass（'active'）；
$（'.sp'）.hide（）；
$（'.active'）.show（）；
函数next（）{
if（document.visibilityState！=='visible'）返回；
$（'.active'）.removeClass（'active'）.addClass（'oldActive'）；
如果（$（'.oldActive'）。是（':last child'））{
$（'.sp'）.first（）.addClass（'active'）；
}
否则{
$（'.oldActive'）.next（）.addClass（'active'）；
}
$（'.oldActive'）.removeClass（'oldActive'）；
$（'.sp'）.fadeOut（）；
$（'.active'）.fadeIn（）；
}
$（“#按钮下一步”）。单击（下一步）；
$（“#按钮上一页”）。单击（函数（）{
$（'.active'）.removeClass（'active'）.addClass（'oldActive'）；
如果（$（'.oldActive'）。是（':first child'））{
$（'.sp'）.last（）.addClass（'active'）；
}
否则{
$（'.oldActive'）.prev（）.addClass（'active'）；
}
$（'.oldActive'）.removeClass（'oldActive'）；
$（'.sp'）.fadeOut（）；
$（'.active'）.fadeIn（）；
});
设置间隔（下一步，3000）；
});
body{font size:12px；字体系列：'Verdana'；}
#页面包装{页边距：0自动；位置：相对；宽度：500px；}
#滑块包装{宽度：300px；高度：200px；}
#滑块{宽度：300px；高度：200px；位置：相对；}
.sp{宽度：300px；高度：200px；位置：绝对；字体大小：20px；颜色：#fff；}
#导航{页边距顶部：20px；宽度：50%；}
#上一个按钮{浮动：左；光标：指针；}
#下一步按钮{左边距：250px！重要；光标：指针；}

jQuery自定义滑块
1.
2.
3.
4.
上
下一个
但在此情况下，我的下一个或上一个按钮不起作用，我还需要.fadeOut（）。fadeIn（）；对我的幻灯片的影响