좌, 우 제어 가능한 옆으로 흐르는 자바스크립트

js

var slidespeed=1;

var leftrightslide=new Array()
var finalslide=''
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=''
var direction = '';

var righttime, lefttime = null;



function fillup(){
  container = getComputedStyle(document.getElementById("layout"));
  cross_slide1 = document.getElementById("cross_slide1");
  cross_slide2 = document.getElementById("cross_slide2");

  cross_slide1.innerHTML= cross_slide2.innerHTML= leftrightslide

  actualwidth = document.getElementById("cross_slide1").offsetWidth;
  
  var left1 = parseInt(cross_slide1.style.left);
  cross_slide2.style.left = (left1 + actualwidth + 3) + 'px';
  slideleft();
  // slideright();
}

function slideleft(){
  
  var left1 = parseInt(cross_slide1.style.left);
  var left2 = parseInt(cross_slide2.style.left);
  
  if (direction == 'left') {
    return;
  } else {
    direction = 'left';
    console.log('slideleft > left1:', left1, 'left2:', left2);
    if (left1 < -actualwidth) {
      cross_slide1.style.left= (left2 + actualwidth + 3) + 'px';
    } else if (left2 < -actualwidth) {
      cross_slide2.style.left = (left1 + actualwidth + 3) + 'px';
    }
    
    slideleftAnim();
  }
  
}

function slideleftAnim(){

  var left1 = parseInt(cross_slide1.style.left);
  var left2 = parseInt(cross_slide2.style.left);
  if (left1 > (actualwidth * (-1) + 8))
    cross_slide1.style.left= (left1 - slidespeed) + 'px';
  else
    cross_slide1.style.left= (left2 + actualwidth + 3)  + 'px';
  
  
  if (left2 > (actualwidth * (-1) + 8))
    cross_slide2.style.left = (left2 - slidespeed)  + 'px';
  else
    cross_slide2.style.left = (left1 + actualwidth + 3)  + 'px';

  lefttime=setTimeout("slideleftAnim()", 30)
  clearTimeout(righttime)
}

function slideright(){
  // cross_slide2.style.left = -1 * (actualwidth + 3) + 'px';

  if (direction == 'right') {
    return;
  } else {
    direction = 'right';
    var left1 = parseInt(cross_slide1.style.left);
    var left2 = parseInt(cross_slide2.style.left);
    
    console.log('slideright >> left1:', left1, 'left2:', left2);
    if (left1 < -container.width) {
      cross_slide1.style.left= (left1 - actualwidth + 3) + 'px';
    } else if (left2 < -container.width) {
      cross_slide2.style.left = (left2 - actualwidth + 3) + 'px';
    }
    sliderightAnim();
  }
}
// 오른쪽 스크롤 
function sliderightAnim(){
  var left1 = parseInt(cross_slide1.style.left);
  var left2 = parseInt(cross_slide2.style.left);
  
  if (left1 < (actualwidth * (+1) - 8))
    cross_slide1.style.left = (left1 + slidespeed) + 'px';
  else
    cross_slide1.style.left = (left2 - actualwidth - 3) + 'px';
    // cross_slide1.style.left = -1 * ( actualwidth + 3) + 'px'

  
  if (left2 < (actualwidth * (+1) -8))
    cross_slide2.style.left = (left2 + slidespeed) + 'px'
  else
    cross_slide2.style.left = (left1 - actualwidth - 3) + 'px';
    // cross_slide2.style.left = -1 *( actualwidth + 3) + 'px';


  righttime=setTimeout("sliderightAnim()",30)
  clearTimeout(lefttime)
}



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;
}

#cross_slide1 {
  background-color: red;
}

#cross_slide2 {
  background-color: blue;
}

html

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

<span onmouseover="slideleft()">left</span>
<span onmouseover="slideright()">right</span>

See the Pen 좌우로 움직이는 레이어 by younghyeong ryu (@wangta69) on CodePen.