如果你可以让我变得更加灵活,那么我在JavaScript中就不那么好了。我有一张幻灯片,我要做的就是添加一个底部,使其自动播放或停止播放。当我把它只是一个警报里面的功能,但是当我把时间间隔代码它不会。这里是我的codepen linkjavascript setInterval()滑块
这里是我的幻灯片代码:
<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);
};
}
谢谢!
你想要什么自动播放?任何影响或什么?因为您只需在'setInterval'中添加'$(“#autoplay”)'' –
您想在setInterval中使用这部分代码做什么:'$('#autoplay');' ? –
@zinebs我没有看到一个滑块 –