let aboveDivs = [].slice.call(document.querySelectorAll(".above")), aboveDivsLength = aboveDivs.length, belowDivs = [].slice.call(document.querySelectorAll(".below")), belowDivsLength = belowDivs.length; const aboveIntervalId = [],belowIntervalId = []; const LEFT = 1,RIGHT = 2,VIEWBOXS = 6; let viewWidth = aboveDivs[0].offsetWidth * VIEWBOXS; let row1s = [].slice.call(document.getElementsByClassName("row1")), row2s = [].slice.call(document.getElementsByClassName("row2")); row1s.forEach(element => { element.style.width = viewWidth; }); for(let i = 0; i < aboveDivsLength; i++){ console.log(i); let aboveInisialLeft = aboveDivs[i].offsetLeft, belowInisialLeft = belowDivs[i].offsetLeft; animate(aboveDivs[i],LEFT,1); animate(belowDivs[i],RIGHT,1); } /** * * @param {HTMLElement} div * @param {String} direction * @param {integer} velocity */ function animate(div,direction,velocity){ let treasureArray = div.querySelectorAll(".treasure"), tLength = treasureArray.length, boxWidth = div.querySelector(".treasure").offsetWidth, allBoxsWidth = boxWidth * (tLength - 6), inisialLeft; // console.log("tLength",tLength,"inisialLeft",inisialLeft,"allBoxsWidth",allBoxsWidth); if(direction == LEFT){ inisialLeft = div.offsetLeft; console.log(inisialLeft); let tempIntervalId = setInterval(()=>{ div.style.left = (div.offsetLeft - velocity) + 'px'; // console.log("LEFT",div.style.left); if(div.offsetLeft < -1 * (allBoxsWidth)){ div.style.left = inisialLeft + 'px'; } },40); aboveIntervalId.push(tempIntervalId); }else if(direction == RIGHT){ inisialLeft = -allBoxsWidth; console.log(inisialLeft); let tempIntervalId = setInterval(()=>{ div.style.left = (div.offsetLeft + velocity) + 'px'; // console.log("RIGHT",div.style.left); if(div.offsetLeft >= 0){ div.style.left = inisialLeft + 'px'; } },40); belowIntervalId.push(tempIntervalId); } }