레이어 자동 스크롤 업

js

var mouseover = false;

function roll_adv(bancount, cha) {
  if (mouseover == false) {
    for (i=1; i <= bancount; i++) {
      var layer = document.getElementById("layer" + i);
      var ly_top = parseInt(layer.style.top);
      ly_top = ly_top - (1 * cha);
      document.getElementById("layer" + i).style.top = ly_top + 'px';
      if (ly_top  <= -cha) {
        document.getElementById("layer" + i).style.top = (bancount - 1) * cha + 'px';
      }
    }
  }

   setTimeout("roll_adv(" + bancount + "," + cha + ")", 1000);
}


// start
roll_adv(5, 100);

css

#test {
  left: 0px; 
  overflow: hidden; 
  width: 100px; 
  position: relative; 
  top: 0px; 
  height: 100px;
}
#test > div {
  left: 0px; 
  width: 100%; 
  height: 100px;
  position: absolute; 
  background-color: gray;
  
}

html

 <div id=test>
   <div id='layer1' onmouseover="mouseover=true;" onmouseleave="mouseover=false;" style="top: 0px;" onmouseout=m_chkmouse=false;>
     1111
   </div>
   <div id='layer2' onmouseover="mouseover=true;" onmouseleave="mouseover=false;" style="top: 100px;" onmouseout=m_chkmouse=false;>
    2222 
   </div>
   <div id='layer3' onmouseover="mouseover=true;" onmouseleave="mouseover=false;" style="top: 200px;" onmouseout=m_chkmouse=false;>
    3333  
   </div>
   <div id='layer4' onmouseover="mouseover=true;" onmouseleave="mouseover=false;" style="top: 300px;" onmouseout=m_chkmouse=false;>
    4444  
   </div>
   <div id='layer5' onmouseover="mouseover=true;" onmouseleave="mouseover=false;" style="top: 400px;" onmouseout=m_chkmouse=false;>
    5555 
   </div>
 </div>

CodePen

See the Pen 스크롤 업 자바 스크립트 by younghyeong ryu (@wangta69) on CodePen.