Next and previous function with js

Question

Next and previous function with js

Navigation

#1 by (2 votes)

2

I have been working for some time on a javascript function that makes the next div when I click on the background image, or for time.

Well this function and I got it, the problem is that now I can not do that by clicking on the right side go to the next and if I click on the left side move back.

This is the function I have for now:

  <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>

They recommended me to make a few floating buttons of direction like a standard slider to control it with an event.stopPropagation (), but I do not do it.

Thank you very much in advance.

I leave you here the jsFiddle: link

javascript html css

asked by David 19.09.2016 в 09:50

source

1 answer

Correct way to use event listener to be able to add many radio buttons? use of rollback before making changes in a sql table

score 2 · Accepted Answer

One thing you can do is what they recommended: create buttons that would occupy 50% of the container and be placed on the boxes (one on the left half to go back and another on the right to go forward) .

Then what you would do is to the next button you would assign the same function that now happens when you click on the boxContainer , and for the previous button you will have to create two functions (similar to those used for the button of next): one for the controller of the click and another to calculate what will be the next element in the animation (the previous one to the current one).

Here I leave a possibility (I left the buttons with semitransparent background so you can see how they are, remove the bottom so they do not look):

$(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>