baeminfresh.js

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");

  var dots = document.querySelectorAll(".slides_pagination a");
  console.log(dots.length);

  var main_slides_lst = document.querySelectorAll(".main_slides_lst li");
  console.log(main_slides_lst.length);

  var slides_pagination = document.querySelector(".slides_pagination");

  var slides = main_slides_lst.length;

  slides_pagination.addEventListener("click", function(event) {
    if(event.target.nodeName === "A") {
        console.log(event.target.innerHTML);
        var index = parseInt(event.target.innerHTML);
        var hideElem;
        var showElem = main_slides_lst[index];
        for(var i = 0; i < main_slides_lst.length; ++i) {

          if(main_slides_lst[i].style.display != "none") {
            if(i == index) return;
            hideElem = main_slides_lst[i];
          }

          else {

          }
            //main_slides_lst[i].style.display = "block";

        }

        if(ref) cancelAnimationFrame(ref);

        requestAnimationFrame(fader.bind(window, hideElem, showElem, index));
        startAuto(right);
        makeWhite(index);
    }
  });

  var left = document.querySelector(".slides_prev");
  left.addEventListener("click", function(event) {
    var curIndex;
    for(var i = 0; i < main_slides_lst.length; ++i) {

      if(main_slides_lst[i].style.display != "none") {
          curIndex = i;
      }

    }
    var newIndex;
    if(curIndex == 0) newIndex = slides - 1;
    else newIndex = curIndex - 1;
    console.log(curIndex);
    console.log(newIndex);
    requestAnimationFrame(fader.bind(window, main_slides_lst[curIndex], main_slides_lst[newIndex], curIndex));
    startAuto(right);
    makeWhite(newIndex);
  });

  var right = document.querySelector(".slides_next");
  right.addEventListener("click", function(event) {
    var curIndex;
    for(var i = 0; i < main_slides_lst.length; ++i) {

      if(main_slides_lst[i].style.display != "none") {
          curIndex = i;
      }

    }
    var newIndex;
    if(curIndex == slides - 1) newIndex = 0;
    else newIndex = curIndex + 1;
    console.log(curIndex);
    console.log(newIndex);
    requestAnimationFrame(fader.bind(window, main_slides_lst[curIndex], main_slides_lst[newIndex], curIndex));
    startAuto(right);
    makeWhite(newIndex);
  });

});

var hider = 1.0;
var shower = 0;

let ref;

function fader(hideElem, showElem, index) {

  hider -= 0.03;
  shower += 0.03;
  showElem.style.zIndex = 51;
  hideElem.style.zIndex = 0;

  showElem.style.display = "block";


  hideElem.style.display = "none";
  hideElem.style.opacity = hider;
  showElem.style.opacity = shower;


  if(hider <= 0.0 || shower >= 1.0) {
    hider = 1.0;
    shower = 0.0;
    cancelAnimationFrame(ref);
    showElem.style.display = "block";
    hideElem.style.display = "none";
    showElem.style.zIndex = 50;

    return;
  }

  ref = requestAnimationFrame(fader.bind(window, hideElem, showElem, index));
}


function makeWhite(index) {
  var slides_pagination = document.querySelector(".slides_pagination");
  var dots = document.querySelectorAll(".slides_pagination a");
  for(var i = 0; i < dots.length; ++i) {
    if(index != i) dots[i].style.opacity = 0.3;
    else dots[index].style.opacity = 1.0;
  }

}

let auto;

function startAuto(elem) {
  if(auto) clearInterval(auto);
  auto = setInterval(function() {
    elem.click();
  }, 2000);

}