0

Al dar click en los botones #slider-but1, #slider-but2 o slider-but3 para que cambie la imagen, quiero que detener el setInterval llamado interval y volverlo a crear. De esa manera, al darle click a alguna imagen, estará visible el tiempo correcto.

El problema es que me está ignorando el clearInterval, y ejecuta nuevamente el setInterval, haciendo que cada vez vaya más rápido el cambio de imágenes. ¿A qué se debe ésto?

var interval = setInterval(tiempo, 3500);

function displaySlider1(){
	document.getElementById('slider1').style.visibility="visible";
	document.getElementById('slider1').style.opacity=1;
	document.getElementById('slider1').style.height="100vh";
}

function hideSlider1(){
	document.getElementById('slider1').style.visibility="hiden";
	document.getElementById('slider1').style.opacity=0;
	document.getElementById('slider1').style.height=0;
}

function displaySlider2(){
	document.getElementById('slider2').style.visibility="visible";
	document.getElementById('slider2').style.opacity=1;
	document.getElementById('slider2').style.height="100vh";
}

function hideSlider2(){
	document.getElementById('slider2').style.visibility="hiden";
	document.getElementById('slider2').style.opacity=0;
	document.getElementById('slider2').style.height=0;
}

function displaySlider3(){
	document.getElementById('slider3').style.visibility="visible";
	document.getElementById('slider3').style.opacity=1;
	document.getElementById('slider3').style.height="100vh";
}

function hideSlider3(){
	document.getElementById('slider3').style.visibility="hiden";
	document.getElementById('slider3').style.opacity=0;
	document.getElementById('slider3').style.height=0;
}

function showSlider1(){
	clearInterval(interval)
	hideSlider2();
	hideSlider3();
	displaySlider1();
  var interval = setInterval(tiempo, 3500);
	interval;
}

function showSlider2(){
	clearInterval(interval)
	hideSlider1();
	hideSlider3();
	displaySlider2();
  var interval = setInterval(tiempo, 3500);
	interval;
}

function showSlider3(){
	clearInterval(interval)
	hideSlider1();
	hideSlider2();
	displaySlider3();
  var interval = setInterval(tiempo, 3500);
	interval;
}

function tiempo(){
	if(slider1.style.opacity ==  1){
		showSlider2();
	}else if(slider2.style.opacity ==  1){
		showSlider3();
	}else if(slider3.style.opacity ==  1){
		showSlider1();
	}
}

interval;
.slider{
	position: relative;
}

.slider-buttons-set{
	z-index:1;
	display:flex;
	flex-flow:row nowrap;
	justify-content: space-around;
	align-items: flex-end;
	align-items: flex-end;
    padding: 0 17%;
    height: 100vh;
}

.slider-buttons{
	background-color: #d0e4ed;
	width:30%;
	height:9px;
	border:0 solid transparent;
  cursor:pointer;
}

.slider-img{
    	background-repeat: no-repeat;
    	background-size: cover;
    	background-position: center;
    	background-origin: content-box;
    	width:100%;
    	transition: visibility 0s, opacity 0.5s ease;
    	top:0;
    	position:absolute;
    	right:0;
    	z-index:-1;
    }
    
    #slider1{ background-color:#6bd2db; }
    #slider2{ background-color:#ffc0cb; }
    #slider3{ background-color:#646cdd; }
<div class="slider">
<div class="slider-buttons-set">
    	<button class="slider-buttons" id="slider-but1" onclick="showSlider1()"></button>
    	<button class="slider-buttons" id="slider-but2" onclick="showSlider2()"></button>
    	<button class="slider-buttons" id="slider-but3" onclick="showSlider3()"></button>
    </div>
    
    <div class="slider-img" id="slider1" style="visibility: visible;opacity: 1; height:100vh;"></div>
    
    <div class="slider-img" id="slider2" style="visibility: hidden;opacity: 0;"></div>
    
    <div class="slider-img" id="slider3" style="visibility: hidden;opacity: 0;"></div>
 </div>

3
  • 1
    intenta quitar en la funciones showSlider las lineas var interval = setInterval(tiempo, 3500); interval; eso es lo que quieres? el 13 jul. 2017 a las 15:24
  • si no lo agrego entonces no ejecuta la variable interval el 13 jul. 2017 a las 15:29
  • debes tener una variable global del interval, ya que cuando haces var estas creando otra variable y asi cada vez que da click, creo que la respuesta que dieron es lo que quieres el 13 jul. 2017 a las 16:12

1 respuesta 1

1

Deberías evitar las redeclaraciones de interval, lo que sucede es asignar un numero diferente al que el setinterval asigna

por lo tanto es mejore tener una variable global asignada y en base a esa limpiar y asignar los valores nuevos del setInterval

var interval = setInterval(tiempo, 3500);

function displaySlider1() {
  document.getElementById('slider1').style.visibility = "visible";
  document.getElementById('slider1').style.opacity = 1;
  document.getElementById('slider1').style.height = "100vh";
}

function hideSlider1() {
  document.getElementById('slider1').style.visibility = "hiden";
  document.getElementById('slider1').style.opacity = 0;
  document.getElementById('slider1').style.height = 0;
}

function displaySlider2() {
  document.getElementById('slider2').style.visibility = "visible";
  document.getElementById('slider2').style.opacity = 1;
  document.getElementById('slider2').style.height = "100vh";
}

function hideSlider2() {
  document.getElementById('slider2').style.visibility = "hiden";
  document.getElementById('slider2').style.opacity = 0;
  document.getElementById('slider2').style.height = 0;
}

function displaySlider3() {
  document.getElementById('slider3').style.visibility = "visible";
  document.getElementById('slider3').style.opacity = 1;
  document.getElementById('slider3').style.height = "100vh";
}

function hideSlider3() {
  document.getElementById('slider3').style.visibility = "hiden";
  document.getElementById('slider3').style.opacity = 0;
  document.getElementById('slider3').style.height = 0;
}

function showSlider1() {
  clearInterval(interval)
  hideSlider2();
  hideSlider3();
  displaySlider1();
  interval = setInterval(tiempo, 3500);
  interval;
}

function showSlider2() {
  clearInterval(interval)
  hideSlider1();
  hideSlider3();
  displaySlider2();
  interval = setInterval(tiempo, 3500);
  interval;
}

function showSlider3() {
  clearInterval(interval)
  hideSlider1();
  hideSlider2();
  displaySlider3();
  interval = setInterval(tiempo, 3500);
  interval;
}

function tiempo() {
  if (slider1.style.opacity == 1) {
    showSlider2();
  } else if (slider2.style.opacity == 1) {
    showSlider3();
  } else if (slider3.style.opacity == 1) {
    showSlider1();
  }
}

interval;
.slider {
  position: relative;
}

.slider-buttons-set {
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: flex-end;
  align-items: flex-end;
  padding: 0 17%;
  height: 100vh;
}

.slider-buttons {
  background-color: #d0e4ed;
  width: 30%;
  height: 9px;
  border: 0 solid transparent;
  cursor: pointer;
}

.slider-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-origin: content-box;
  width: 100%;
  transition: visibility 0s, opacity 0.5s ease;
  top: 0;
  position: absolute;
  right: 0;
  z-index: -1;
}

#slider1 {
  background-color: #6bd2db;
}

#slider2 {
  background-color: #ffc0cb;
}

#slider3 {
  background-color: #646cdd;
}
<div class="slider">
  <div class="slider-buttons-set">
    <button class="slider-buttons" id="slider-but1" onclick="showSlider1()"></button>
    <button class="slider-buttons" id="slider-but2" onclick="showSlider2()"></button>
    <button class="slider-buttons" id="slider-but3" onclick="showSlider3()"></button>
  </div>

  <div class="slider-img" id="slider1" style="visibility: visible;opacity: 1; height:100vh;"></div>

  <div class="slider-img" id="slider2" style="visibility: hidden;opacity: 0;"></div>

  <div class="slider-img" id="slider3" style="visibility: hidden;opacity: 0;"></div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.