레이어 좌측으로 움직이는 자바스크립트

js

var slidespeed = 1

var leftrightslide=new Array()
leftrightslide[0]='A===='
leftrightslide[1]='B===='
leftrightslide[2]='C===='
leftrightslide[3]='D===='
leftrightslide[4]='E===='
leftrightslide[5]='F===='
leftrightslide[6]='G===='
leftrightslide[7]='H===='
leftrightslide[8]='I===='
leftrightslide[9]='J===='
leftrightslide[10]='K===='
leftrightslide[11]='L===='

leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'

var actualwidth=''

function fillup(){
  cross_slide = document.getElementById("cross_slide")
  cross_slide2 = document.getElementById("cross_slide2")
  
  cross_slide.innerHTML= cross_slide2.innerHTML= leftrightslide
  
  actualwidth = document.getElementById("cross_slide").offsetWidth;

  cross_slide2.style.left = (actualwidth + 3) + 'px';

  lefttime=setInterval("slideleft()", 3)
}

function slideleft(){
  var left = parseInt(cross_slide.style.left);
  if (left > (actualwidth * (-1) + 8))
    cross_slide.style.left= (left - slidespeed) + 'px';
  else
    cross_slide.style.left= (left + actualwidth + 3)  + 'px';
  
  var left2 = parseInt(cross_slide2.style.left);
  if (left > (actualwidth * (-1) + 8))
    cross_slide2.style.left = (left2 - slidespeed)  + 'px';
  else
    cross_slide2.style.left = (left2 + actualwidth + 3)  + 'px';
}

window.onload=fillup

css

#layout {
  position:relative;
  width:416px;
  height:145px;
  overflow:hidden
}

#inner {
  position:absolute;
  width:100%;
  height:100%;
  background-color:#FFFFFF;
}

#inner > div {
  position:absolute;
  top: 0;

}

#temp {
  visibility:hidden;
  position:absolute;
  top:-100;
}

htlm

<div id="layout">
    <div id="inner" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">
      <div id="cross_slide" style="left:0"></div>
      <div id="cross_slide2"></div>
    </div>
  </div>

See the Pen 레이어 좌우로 스크롤되는 자바스크립트 예제 by younghyeong ryu (@wangta69) on CodePen.