2017-07-06 95 views
0

如果你可以让我变得更加灵活,那么我在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); 
     }; 
    } 

谢谢!

+0

你想要什么自动播放?任何影响或什么?因为您只需在'setInterval'中添加'$(“#autoplay”)'' –

+0

您想在setInterval中使用这部分代码做什么:'$('#autoplay');' ? –

+0

@zinebs我没有看到一个滑块 –

回答

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 { 
 
\t position: absolute; 
 
\t overflow: hidden; 
 
\t height: 100%; 
 
\t width: calc(100% - 3rem); 
 
\t bottom: calc(-80% + 10rem); 
 
\t left: 3rem; 
 
\t background: #fff; 
 
\t border: 1px solid; 
 
\t transition: 0.5s; 
 
\t z-index: 1; 
 
} 
 
.Dash_map_wrapSlider:hover{ 
 
\t bottom: 0rem; 
 
\t transition: 0.5s; 
 
} 
 
.Dash_map_wrapSliderchoise { 
 
\t background: #3E474F; 
 
\t box-shadow: 0 .5em 1em #111; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t z-index: 900; 
 
\t width: 100%; 
 
\t height: 2rem; 
 
\t line-height: 2rem; 
 
\t text-align: center; 
 
\t vertical-align: middle; 
 
} 
 
.Dash_map_sumSlide { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 100%; 
 
\t z-index: 10; 
 
\t background-color: #fff; 
 
\t transition: left 0s .75s; 
 
} 
 
.clsDashMap_sumSlideInput { 
 
\t display: none; 
 
\t height: 11rem; 
 
} 
 
.clsDashMap_sumSlideTitle { 
 
\t position : absolute; 
 
\t top:0; 
 
\t width: 100%; 
 
\t height: 2rem; 
 
\t left: inherit; 
 
\t color: #fff; 
 
\t background-color: #73b9ff; 
 
\t text-align: center; 
 
\t font-weight: bold; 
 
\t font-size: 1.20rem; 
 
} 
 
.clsDashMap_sumSlideContentBoxTitle { 
 
\t /*padding: 10%;*/ 
 
\t font-weight: bold; 
 
\t color: #666; 
 
} 
 
.clsDashMap_sumSlideSiteContentSummary { 
 
\t position : absolute; 
 
\t top: 2rem; 
 
\t width: 100%; 
 
\t height: 16rem; 
 
\t color: #000000; 
 
\t background-color: aliceblue; 
 
\t text-align: center; 
 
} 
 
.clsDashMap_sumSlideContent { 
 
\t position: absolute; 
 
\t top: 20rem; 
 
\t margin: auto; 
 
\t width: 100%; 
 
\t color: #000000; 
 
\t /* text-align: center; */ 
 
} 
 
[id^="Dash"]:checked + .Dash_map_sumSlide { 
 
\t left: 0; 
 
\t z-index: 100; 
 
\t transition: left .65s ease-out; 
 
} 
 
[id^="Dash"]:checked + .Dash_map_sumSlide + .Dash_map_sumSlide { left: 50%; transition-delay: 0.25s; } 
 

 
.Dash_map_wrapSliderchoise label { 
 
\t color: #fff; 
 
\t cursor: pointer; 
 
\t display: inline-block; 
 
\t line-height: 2rem; 
 
\t font-size: 0.75rem; 
 
\t font-weight: bold; 
 
\t padding: 0 1em; 
 
\t 
 
} 
 
/*Style leds*/ 
 
.clsDashMap_sumSlideContentBox { 
 
\t margin: auto; 
 
\t float: left; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
/* .clsDashMap_sumSlideContentBox1Title { */ 
 
\t  /* position: absolute; */ 
 
    /* top: -1rem; */ 
 
    /* left: 0.3rem; */ 
 
/* } */ 
 
.led { 
 
\t border-radius: 5rem; 
 
\t width: 2rem; 
 
\t height: 2rem; 
 
\t line-height: 2rem; 
 
} 
 
.green { 
 
\t  background-color: #36d900; 
 
} 
 
.red { 
 
\t  background-color: #E74C3C; 
 
} 
 
#pieChartAlm, #pieChartTkt { 
 
\t margin: auto; 
 
\t width: 86%; 
 
}
<div class="Dash_map_wrapSlider" id="Dash_map_wrapSlider"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t <div style="border: 1px solid red;width: 100%;"> 
 
\t \t \t \t \t <input id="Dash_map_sumSlideSite" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked> 
 
\t \t \t \t \t <div class="Dash_map_sumSlide slide_Site " style="float: left;width: 50%;border: 2px solid yellow;"> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideTitle">SITE</div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideSiteContentSummary"> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div> 
 
\t \t \t \t \t \t \t \t <div class="green led">OK</div> 
 
\t \t \t \t \t \t \t \t <div class="red led">KO</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">AlarmesSite</div> 
 
\t \t \t \t \t \t \t \t <canvas id="pieChartAlm" ></canvas> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">TicketsSite</div> 
 
\t \t \t \t \t \t \t \t <canvas id="pieChartTkt" ></canvas> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideContent">put here content</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="Dash_map_sumSlide slide_Alarme" style="float: left;width: 50%; border: 2px solid green;"> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideTitle" style="left:0;">ALARME</div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideSiteContentSummary"> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div> 
 
\t \t \t \t \t \t \t \t <div class="green led">OK</div> 
 
\t \t \t \t \t \t \t \t <div class="red led">KO</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">ALARME1Alm</div> 
 
\t \t \t \t \t \t \t \t <canvas id="pieChartAlm" ></canvas> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Tickets1Alm</div> 
 
\t \t \t \t \t \t \t \t <canvas id="pieChartTkt" ></canvas> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideContent">put here content</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t <div style="border: 1px solid red;"> 
 
\t \t \t \t \t <input id="Dash_map_sumSlideAlarme" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked> \t \t \t 
 
\t \t \t \t \t <div class="Dash_map_sumSlide slide_Site " style="width: 50%;border: 2px solid black;"> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideTitle">TECHNICIEN</div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideSiteContentSummary"> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div> 
 
\t \t \t \t \t \t \t \t <div class="green led">OK</div> 
 
\t \t \t \t \t \t \t \t <div class="red led">KO</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Alarmes2Tech</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Tickets2Tech</div> \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideContent">put here content</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="Dash_map_sumSlide slide_Alarme" style="width: 50%;border: 2px solid darkturquoise;"> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideTitle" style="position: initial;">ACTION</div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideSiteContentSummary"> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Etat</div> 
 
\t \t \t \t \t \t \t \t <div class="green led">OK</div> 
 
\t \t \t \t \t \t \t \t <div class="red led">KO</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">alarme3Act</div> \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBox"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashMap_sumSlideContentBoxTitle">Tickets3Act</div> \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashMap_sumSlideContent">put here content</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
    
 
    </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="Dash_map_wrapSliderchoise"> 
 
\t \t \t \t \t <label for="Dash_map_sumSlideSite">Site/Alarme</label> 
 
\t \t \t \t \t <label for="Dash_map_sumSlideAlarme">Technicien/Action</label> 
 
      <span id="autoplay" style="color:#fff;">Start</span> 
 
\t \t \t \t </div>

+0

感谢您的帮助....在控制台它给了我这个幻灯片0 幻灯片1,幻灯片2,幻灯片3,幻灯片4,幻灯片5,幻灯片6 .....知道我只有2张幻灯片....第二个问题是,滑块不会移动一次,我点击chekbox @ H77 – Zee

+0

我已经添加了上面的片段(从你的笔)。你在这里也遇到同样的情况吗? – H77

+0

是的,现在它在codepen中对我做的是同样的事情,但不是在我的真实网页中......它移动一次然后我只得到空白幻灯片,这真的很奇怪,因为它是相同的代码...你认为我的其余部分代码可以影响它? – Zee