좌우로 움직이는 레이어

js

var rollingContinue = true;

var stopT = 1000 ;
var changeT = 100 ;

function rollingList1(objName){
  if(rollingContinue) {
    for(var i = 0 ; window[objName + i] != null ; i++) {
      if(parseInt(window[objName + "5"].style.left) >= 377) {
        var left = parseInt(window[objName + i].style.left) - 5;
        window[objName + i].style.left = left + 'px';
      }
        
    }
  }
  if(parseInt(window[objName + "5"].style.left) >= 377) {
    setTimeout("rollingList1('list')", changeT);
  } else { 
    setTimeout("rollingList2('list')", 6000);
  }
}

function rollingList2(objName) {
  var tmp ;
  if(rollingContinue){
    tmp = parseInt(window[objName + "0"].style.left) ;
    for(var i = 0 ; window[objName + i] != null ; i++) {
      var intLeft = parseInt(window[objName + i].style.left);
      if(tmp  <= -5) { 
        var left = intLeft + 5;
        window[objName + i].style.left = left + 'px' ;
      }
      if(tmp  < 0 && tmp > -5) {
        var left = intLeft + tmp * (-1);
        window[objName + i].style.left = left + 'px' ;
      }
    }
  }
  if(parseInt(window[objName + "0"].style.left)  < 0) {
    setTimeout("rollingList2('list')", changeT);
  } else {
    setTimeout("rollingList1('list')", 6000);
  }
}

function rollingListInit(objName){
  var oWidth = 188 ;
  var firstItem = window[objName + "0"];
  
  if(firstItem != null){ // item 이 로딩되었으면
    window[objName + "0"].style.left = 0;
    if(firstItem.offsetWidth > 0) {
      oWidth = firstItem.offsetWidth;
    }
    for(var i = 0; window[objName + i] != null; i++){
      window[objName + i].style.left = (oWidth * i) + 'px';
    }
    setTimeout("rollingList1('list')", stopT);
  }
}

window.onload=rollingListInit('list');

css

#layout {
  position:relative;
  width:565px;
  height:158px;
  overflow:hidden;
}

#inner {
  position:absolute;
  width:565px;
  height:158px;
  clip:rect(0 565 158 0);
  left:0;
  top:0;
}

#inner > div {
  width: 4740px;
}

.item {
  left: 0px; 
  width: 188px; 
  height:158px; 
  position: absolute;
  top: 0px;
  text-align: center;
}

html

<div id="layout"> 
  <div id="inner" onmouseover="rollingContinue=false" onmouseout="rollingContinue=true"> 
    <div>
      <div id="list0" class="item"> Item1 </div>
      <div id="list1" class="item"> Item2 </div>
      <div id="list2" class="item"> Item3 </div>
      <div id="list3" class="item"> Item4 </div>
      <div id="list4" class="item"> Item5 </div>
      <div id="list5" class="item"> Item6 </div>
    </div>
  </div>
</div>

See the Pen select 시 다른 slect 에 값 넣기 by younghyeong ryu (@wangta69) on CodePen.