2

llevo un tiempo trabajando en una función de javascript que hace pasar al siguiente div cuando hago click en la imagen de fondo, o por tiempo.

Bien esta función ya la conseguí, el problema es que ahora no consigo hacer que al hacer click en la parte derecha pase a la siguiente y si hago click en la parte izquierda se mueva hacia atrás.

Esta es la función que tengo por ahora :

  <script type='text/javascript'>//<![CDATA[

  $(document).ready(function() {
    var boxContainer = $('.boxes');
    var allBoxes = boxContainer.children("div");
    var timeout;
    transitionBox(null, allBoxes.first());

    boxContainer.click(function() {
      var from = boxContainer.children('div:visible');
      var to = findNext(from);
      transitionBox(from, to);
    });

    function findNext(to) {
      if (to.is(":last-child")) {
        return to.closest(".boxes").children("div").first();
      } else {
        return to.next();
      }
    }

    function transitionBox(from, to) {
       clearTimeout(timeout);

      function next() {

        var nextTo = findNext(to);

        to.fadeIn(500, function() {
          timeout = setTimeout(function() {
            transitionBox(to, nextTo);
          }, 5000);
        });
      }

      if (from) {
        from.fadeOut(800, next);
      } else {
        next();
      }
    }
  });

  </script>

Me recomendaron realizar unos botones botones flotantes de dirección como un slider standard para controlarlo con un event.stopPropagation(), pero no doy hecho.

Muchas gracias de antemano.

Os dejo por aqui el jsFiddle : https://jsfiddle.net/v1e1exL8/5/

3
  • Hola, podrás editar la pregunta con el código html? Commented el 19 sept. 2016 a las 12:59
  • Añadido el jsFiddle jsfiddle.net/v1e1exL8/5
    – David
    Commented el 19 sept. 2016 a las 13:20
  • Lo único que se me ocurre es intentar saber dónde está la posición del mouse y hacer algo en consecuencia de eso.
    – user13558
    Commented el 19 sept. 2016 a las 13:57

1 respuesta 1

2

Una cosa que puedes hacer es lo que te recomendaron: crear unos botones que ocuparían el 50% del contenedor y se colocarían sobre las cajas (uno en la mitad izquierda para ir atrás y otro en la parte derecha para ir hacia adelante).

Entonces lo que harías es al botón de siguiente le asignarías la misma función que ahora ocurre al pulsar sobre el boxContainer, y para el botón de anterior tendrás que crear dos funciones (similares a las que se utilizan para el botón de siguiente): una para el controlador del click y otra para calcular cuál será el siguiente elemento en la animación (el anterior al actual).

Aquí te dejo una posibilidad (he dejado los botones con fondo semitransparente para que veas cómo quedan, quítales el fondo para que no se vean):

$(document).ready(function() {
  var boxContainer = $('.boxes');
  var allBoxes = boxContainer.children("div");
  var timeout;
  var prevButton = boxContainer.find(".prevbutton");
  var nextButton = boxContainer.find(".nextbutton");
  transitionBox(null, allBoxes.first());

  prevButton.click(function(e) {
    e.preventDefault();
    var from = boxContainer.children('div:visible');
    var to = findPrevious(from);
    transitionBox(from, to);
    });
  
  nextButton.click(function(e) {
    e.preventDefault();
    var from = boxContainer.children('div:visible');
    var to = findNext(from);
    transitionBox(from, to);
    });
  
  

  function findNext(to) {
    if (to.is(":last-child")) {
      return to.closest(".boxes").children("div").first();
    } else {
      return to.next("div");
    }
  }
  
  function findPrevious(to) {
    if (to.is("div:first-of-type")) {
      return to.closest(".boxes").children("div").last();
    } else {
      return to.prev("div");
    }
  }

  function transitionBox(from, to) {
    clearTimeout(timeout);

    function next() {
      var nextTo = findNext(to);
      to.fadeIn(500, function() {
        timeout = setTimeout(function() {
          transitionBox(to, nextTo);
        }, 2500);
      });
    }
    
    function previous() {
      var previousTo = findPrevious(to);
      to.fadeIn(500, function() {
        timeout = setTimeout(function() {
          transitionBox(to, previousTo);
        }, 2500);
      });
    }

    if (from) {
      from.fadeOut(500, next);
    } else {
      next();
    }
  }
});
.boxes {
  display:inline-block;
  position:relative;
  }
.boxes div{
  display:none;
}
.sizeR{
  width:500px;
  height:500px;
}

.prevbutton, .nextbutton {
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  width:50%;
  height:100%;
  background:rgba(0,0,0,0.2);
  }

.nextbutton {
  left:50%;
  background:rgba(255,0,0,0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="boxes">
  
  <a href="#prev" class="prevbutton"></a>
  <a href="#next" class="nextbutton"></a>
  
  <div class="box1" id="1">
    text1
    <a href="#2" ><img class="sizeR" src="http://rlv.zcache.es/van_los_platanos_pegatina_cuadrada-r144680d35e3e45a0ad2282b310141c3d_v9wf3_8byvr_324.jpg"></a>  
  </div>
  <div class="box2" id="2">
    text2
    <a href="#3" ><img class="sizeR" src="http://rlv.zcache.es/pares_de_platanos_del_dibujo_animado_pegatina_cuadrada-r46c488b848514841a3aa27aaec211f22_v9wf3_8byvr_324.jpg"></a>  
  </div>
  <div class="box3" id="3">
    text3
    <a href="#1" ><img class="sizeR" src="http://rlv.zcache.es/deme_los_platanos_pegatina_cuadrada-r25a2e828474b4281b475f1148b382be4_v9wf3_8byvr_324.jpg"></a>
  </div>
</div>

1
  • 1
    BRAVO! Funciona a la perfección!!! Justo lo que quería. Estuve cerca y a la vez tan lejos... Muchas gracias
    – David
    Commented el 19 sept. 2016 a las 15:28

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.