javascript setInterval（）滑块

Question

如果您可以暂停我的话，我的JavaScript也不那么好。我有一张幻灯片，我要做的是添加底部以使其自动播放或停止播放。 当我在函数中仅放置一个Alert时，它会起作用，但是当我将时间间隔代码放入时，它不会。 这是我的codepen链接

这是我的幻灯片代码：

<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>

            <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>

我的JS代码：

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

谢谢 ！

Answer 1

尝试像这样修改您的playSlide方法。 这将循环访问单选按钮，并每3秒检查一次。

 var nextSlide = 0; var slideTimer = null; function playSlide() { var elementSlide = document.getElementById('autoplay'); elementSlide.onclick = function() { var slides = document.querySelectorAll('#Dash_map_wrapSlider input[id^="Dash"]'); if (!slideTimer) { elementSlide.innerHTML = "Stop"; slideTimer = setInterval(function() { if (slides.length <= nextSlide) nextSlide = 0; console.log('showing slide ' + nextSlide); slides.forEach(function (slide, index) { slide.checked = index === nextSlide; }); nextSlide++; }, 3000); } else { elementSlide.innerHTML = "Start"; clearInterval(slideTimer); slideTimer = null; } }; } playSlide(); 

 .Dash_map_wrapSlider { position: absolute; overflow: hidden; height: 100%; width: calc(100% - 3rem); bottom: calc(-80% + 10rem); left: 3rem; background: #fff; border: 1px solid; transition: 0.5s; z-index: 1; } .Dash_map_wrapSlider:hover{ bottom: 0rem; transition: 0.5s; } .Dash_map_wrapSliderchoise { background: #3E474F; box-shadow: 0 .5em 1em #111; position: absolute; left: 0; bottom: 0; z-index: 900; width: 100%; height: 2rem; line-height: 2rem; text-align: center; vertical-align: middle; } .Dash_map_sumSlide { height: 100%; width: 100%; position: absolute; top: 0; left: 100%; z-index: 10; background-color: #fff; transition: left 0s .75s; } .clsDashMap_sumSlideInput { display: none; height: 11rem; } .clsDashMap_sumSlideTitle { position : absolute; top:0; width: 100%; height: 2rem; left: inherit; color: #fff; background-color: #73b9ff; text-align: center; font-weight: bold; font-size: 1.20rem; } .clsDashMap_sumSlideContentBoxTitle { /*padding: 10%;*/ font-weight: bold; color: #666; } .clsDashMap_sumSlideSiteContentSummary { position : absolute; top: 2rem; width: 100%; height: 16rem; color: #000000; background-color: aliceblue; text-align: center; } .clsDashMap_sumSlideContent { position: absolute; top: 20rem; margin: auto; width: 100%; color: #000000; /* text-align: center; */ } [id^="Dash"]:checked + .Dash_map_sumSlide { left: 0; z-index: 100; transition: left .65s ease-out; } [id^="Dash"]:checked + .Dash_map_sumSlide + .Dash_map_sumSlide { left: 50%; transition-delay: 0.25s; } .Dash_map_wrapSliderchoise label { color: #fff; cursor: pointer; display: inline-block; line-height: 2rem; font-size: 0.75rem; font-weight: bold; padding: 0 1em; } /*Style leds*/ .clsDashMap_sumSlideContentBox { margin: auto; float: left; padding: 10px; text-align: center; } /* .clsDashMap_sumSlideContentBox1Title { */ /* position: absolute; */ /* top: -1rem; */ /* left: 0.3rem; */ /* } */ .led { border-radius: 5rem; width: 2rem; height: 2rem; line-height: 2rem; } .green { background-color: #36d900; } .red { background-color: #E74C3C; } #pieChartAlm, #pieChartTkt { margin: auto; width: 86%; } 

 <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> </div> <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;">Start</span> </div>