javascript setInterval（）滑块

如果你能让我停下来的话，我的JavaScript不是很好。我有一张幻灯片，我要做的是添加一个底部，使其自动播放或停止。当我只在函数中添加一个警报时，它会工作，但当我添加间隔代码时，它不会工作。这是我的

这是我的幻灯片代码：

<div class="Dash_map_wrapSlider" id="Dash_map_wrapSlider">  
            <div style="border: 1px solid red;width: 100%;">
                <input id="Dash_map_sumSlideSite" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked>
                <div class="Dash_map_sumSlide slide_Site " style="float: left;width: 50%;border: 2px solid yellow;">
                    <div class="clsDashMap_sumSlideTitle">SITE</div>
                    <div class="clsDashMap_sumSlideSiteContentSummary">
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
                            <div class="green led">OK</div>
                            <div class="red led">KO</div>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">AlarmesSite</div>
                            <canvas id="pieChartAlm" ></canvas>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">TicketsSite</div>
                            <canvas id="pieChartTkt" ></canvas>
                        </div>
                    </div>
                    <div class="clsDashMap_sumSlideContent">put here content</div>
                </div>

                <div class="Dash_map_sumSlide slide_Alarme" style="float: left;width: 50%; border: 2px solid green;">
                    <div class="clsDashMap_sumSlideTitle" style="left:0;">ALARME</div>
                    <div class="clsDashMap_sumSlideSiteContentSummary">
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
                            <div class="green led">OK</div>
                            <div class="red led">KO</div>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">ALARME1Alm</div>
                            <canvas id="pieChartAlm" ></canvas>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Tickets1Alm</div>
                            <canvas id="pieChartTkt" ></canvas>
                        </div>
                    </div>
                    <div class="clsDashMap_sumSlideContent">put here content</div>
                </div>
            </div>

            <div style="border: 1px solid red;">
                <input id="Dash_map_sumSlideAlarme" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked>            
                <div class="Dash_map_sumSlide slide_Site " style="width: 50%;border: 2px solid black;">
                    <div class="clsDashMap_sumSlideTitle">TECHNICIEN</div>
                    <div class="clsDashMap_sumSlideSiteContentSummary">
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
                            <div class="green led">OK</div>
                            <div class="red led">KO</div>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Alarmes2Tech</div>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Tickets2Tech</div>                          
                        </div>
                    </div>
                    <div class="clsDashMap_sumSlideContent">put here content</div>
                </div>
                    <div class="Dash_map_sumSlide slide_Alarme" style="width: 50%;border: 2px solid darkturquoise;">
                    <div class="clsDashMap_sumSlideTitle" style="position: initial;">ACTION</div>
                    <div class="clsDashMap_sumSlideSiteContentSummary">
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
                            <div class="green led">OK</div>
                            <div class="red led">KO</div>
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">alarme3Act</div>                            
                        </div>
                        <div class="clsDashMap_sumSlideContentBox">
                            <div class="clsDashMap_sumSlideContentBoxTitle">Tickets3Act</div>                           
                        </div>
                    </div>
                    <div class="clsDashMap_sumSlideContent">put here content</div>
                </div>
            </div>

---

谢谢大家!

尝试这样修改播放幻灯片的方法。这将遍历单选按钮，并每隔3秒检查下一个按钮

var nextSlide=0；
var slideTimer=null；
函数playsiled（）{
var elementSlide=document.getElementById（'autoplay'）；
elementSlide.onclick=函数（）{
var slides=document.queryselectoral（“#Dash_map_wrapSlider input[id^=“Dash”]”）；
如果（！slideTimer）{
elementSlide.innerHTML=“停止”；
slideTimer=setInterval（函数（）{
如果（slides.length）你想自动播放什么？有什么效果吗？因为你只需在
setInterval
中添加
$（“#自动播放”）
你想对setInterval中的这部分代码做什么：'$（'#自动播放'）？@zinebs我看不到幻灯片谢谢你的帮助…在控制台中，它给了我这个curent slide0 curent slide1，curent slide2，curent slide3，curent slide4，curent slide5，curent slide6…知道我只有两张幻灯片…第二个问题是，一旦我单击chekbox@h77，滑块就不会移动。我已经添加了上面的片段（从你的笔中）。同样的情况也会发生在你身上吗？是的，现在它在codepen中对我做了同样的事情，但在我的真实网页中没有…它移动了一次，然后我只得到空白幻灯片，这真的很奇怪，因为它是相同的代码…你认为我的其他代码会影响它吗？也许你有其他以id“破折号”开头的元素。您可以在查询选择器中更具体一些。例如#Dash#u map#wrapSlider input[id^=“Dash”]非常感谢您的帮助它工作了我必须像您一样添加一个循环…现在我必须通过添加一个clearInterval使其成为一个停止/启动按钮，如果我阻塞，您能给我一些帮助吗？
            <div class="Dash_map_wrapSliderchoise">
                <label for="Dash_map_sumSlideSite">Site / Alarme</label>
                <label for="Dash_map_sumSlideAlarme">Technicien / Action</label>
      <span id="autoplay" style="color:#fff;">Autoplay</span>
            </div>

function playSlide() {
        console.log('heeey');
        var elementSlide = document.getElementById('autoplay');
        elementSlide.onclick = function(){
            //alert('hey beauty !');
            setInterval(function(){
                $('#autoplay');
            }, 3000);
        };
    }