Javascript 自动和手动滑块

如何让主滑块自动播放而不是手动播放？ 这是我使用的滑块示例，但没有同时播放（手动和自动）的示例：

我应该在JS代码中添加什么？

---

有什么帮助吗？

我刚刚使用了一个引导4转盘来完成这项工作。此旋转木马使用

.carousel（）

函数执行此任务。它是自动和手动的

如果你真的只想用一种简单的方法点击每张图片的点，你只需为每张点/图片创建一个函数，如下所示：

 <div style="text-align:center">
  <span class="dot" onclick="showSlide1()"></span> 
  <span class="dot" onclick="showSlide2()"></span> 
  <span class="dot" onclick="showSlide3()"></span> 
</div>

<script>
var slideIndex = 0;
showSlide1();

function showSlide1() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
    slides[1].style.display = "none";
    slides[2].style.display = "none"; 
    dots[1].className = dots[1].className.replace(" active", "");
    dots[2].className = dots[2].className.replace(" active", "");
    slides[0].style.display = "block";  
    dots[0].className += " active";
}
function showSlide2() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
    slides[0].style.display = "none";
    slides[2].style.display = "none"; 
    dots[0].className = dots[0].className.replace(" active", "");
    dots[2].className = dots[2].className.replace(" active", "");
    slides[1].style.display = "block";  
    dots[1].className += " active";
}
function showSlide3() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
    slides[0].style.display = "none";
    slides[1].style.display = "none"; 
    dots[0].className = dots[0].className.replace(" active", "");
    dots[1].className = dots[1].className.replace(" active", "");
    slides[2].style.display = "block";  
    dots[2].className += " active";
}
</script>

var slideIndex=0；
showSlide1（）；
函数showSlide1（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
幻灯片[1]。style.display=“无”；
幻灯片[2]。style.display=“无”；
点[1]。className=dots[1]。className.replace（“活动”和“”）；
点[2]。className=dots[2]。className.replace（“活动”和“”）；
幻灯片[0]。style.display=“block”；
点[0]。类名+=“活动”；
}
函数showSlide2（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
幻灯片[0]。style.display=“无”；
幻灯片[2]。style.display=“无”；
点[0]。类名称=点[0]。类名称。替换（“活动的”）；
点[2]。className=dots[2]。className.replace（“活动”和“”）；
幻灯片[1]。style.display=“block”；
点[1]。类名+=“活动”；
}
函数showSlide3（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
幻灯片[0]。style.display=“无”；
幻灯片[1]。style.display=“无”；
点[0]。类名称=点[0]。类名称。替换（“活动的”）；
点[1]。className=dots[1]。className.replace（“活动”和“”）；
幻灯片[2]。style.display=“block”；
点[2]。类名+=“活动”；
}

---

对于少量图片来说，这应该是不错的，但如果你在网站上有多个横幅或更多图片，这不是一个很好的解决方案，因为它在JS中有更多的代码。应该有助于您了解每张图片的激活方式，您可以从中找到所需的解决方案。

因此，请澄清：您可以将自动动画保留在其中，只需添加此内容即可。但是正如前面所说的，这更多的是帮助你理解选择是如何工作的，而不是一个完整的解决方案，因此你可以自己开发自己的解决方案。我的网站中只有一个滑块，主页滑块。这个解决方案的大问题是，我自己的网站仍然因为使用引导css文件使用（或设置超时）而受损。这个问题的标题应该是“如何在一段时间内重复完成一项任务”。您的问题与滑块本身无关，而是缺乏javascript语言知识。我建议看一些关于JS中计时器的YouTube。