javascript setInterval（）滑块

时间：2017-07-06 07:55:06

标签： javascript html css slider setinterval

如果你可以停下来，那我的JavaScript就不那么好......我有一张幻灯片，我要做的就是添加一个底部，让它自动播放或停止播放。当我在它所使用的功能中放置一个警报时，但是当我把区间代码放入其中时它就赢了。这是我的codepen link

这是我的幻灯片代码：

<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);
        };
    }

谢谢！

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题