使用jQuery的水平菜单的基本传送带

Question

我有一个水平菜单，其中包含太多元素以显示在同一个空间中。我想创建一个旋转木马效果，以便当用户单击方向箭头时，容器将水平翻译到一侧。

.container { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t height: 70px; 
 
\t width: 420px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
a { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t margin: 0 10px; 
 
\t min-width: 50px; 
 
\t min-height: 50px; 
 
\t border: 0.1px solid tomato; 
 
} 
 

 
#left, #right { 
 
\t border: 1px solid orange; 
 
    padding: 5px; 
 
    margin: 10px 60px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
* { 
 
\t -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
 
\t position: relative; 
 
}

<div class="container"> 
 
\t <a>1</a> 
 
\t <a>2</a> 
 
\t <a>3</a> 
 
\t <a>4</a> 
 
\t <a>5</a> 
 
\t <a>6</a> 
 
\t <a>7</a> 
 
\t <a>8</a> 
 
\t <a>9</a> 
 
\t <a>10</a> 
 
\t <a>11</a> 
 
\t <a>12</a> 
 
\t <a>13</a> 
 
\t <a>14</a> 
 
</div> 
 

 
<div id="left">left arrow</div> 
 
<div id="right">right arrow</div>

我怎么能这样的动画与jQuery/CSS，使得在点击right当前要素将转化为左侧因此，未来元素的显示？
我正在考虑使用translate（％），但div的宽度取决于容器中元素的数量，因此它会变化... 此外，如果只有2个要显示的元素，我将不得不调整动画。

我有点失落，所以任何帮助，欢迎！

Answer 1

你可以使用这样的东西。我添加了一个可以在主容器内移动的内部容器。

我不检查是否已达到启动结束。检查第一个/最后一个子元素是否可见可能是一种覆盖方式。

$(document).ready(function() { 
 

 
    $("#right").on("click", function() { 
 
    var l = $(".inner").css("left"); 
 
    l = Number(l.substring(0, l.length - 2)) - 420; 
 
    $(".inner").css("left", l + "px"); 
 
    }); 
 
    
 
    $("#left").on("click", function() { 
 
    var l = $(".inner").css("left"); 
 
    l = Number(l.substring(0, l.length - 2)) + 420; 
 
    $(".inner").css("left", l + "px"); 
 
    }); 
 
});

.container { 
 
    height: auto; 
 
    width: 420px; 
 
    overflow: hidden; 
 
    padding: 1em 0; 
 
    border: 1px solid black; 
 
} 
 

 
.inner { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    left: 0; 
 
} 
 

 
a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: 0 10px; 
 
    min-width: 50px; 
 
    min-height: 50px; 
 
    border: 0.1px solid tomato; 
 
} 
 

 
#left, 
 
#right { 
 
    border: 1px solid orange; 
 
    padding: 5px; 
 
    margin: 10px 60px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="inner"> 
 
    <a>1</a> 
 
    <a>2</a> 
 
    <a>3</a> 
 
    <a>4</a> 
 
    <a>5</a> 
 
    <a>6</a> 
 
    <a>7</a> 
 
    <a>8</a> 
 
    <a>9</a> 
 
    <a>10</a> 
 
    <a>11</a> 
 
    <a>12</a> 
 
    <a>13</a> 
 
    <a>14</a> 
 
    </div> 
 
</div> 
 

 
<div id="left">left arrow</div> 
 
<div id="right">right arrow</div>