Javascript - 通过按下另一个元素来移动元素

Question

假设我有一个带有图像的 div，但并非所有图像都有空间同时显示，所以我使用了 CSS 属性 white-space: nowrap 和 overflow: hidden，这样元素就不会换行或扩展 div。

现在我需要 JavaScript 技术来允许我向左或向右移动它们，以便用户也可以访问这些不可见的图像。将其视为 slider 。

它应该有两个导航按钮，左和右，通过按下每个按钮，图像会向特定方向移动。运动应该是动画的(不是立即移动，而是它们应该在特定时间段内逐帧移动)

这是 jsfiddle 演示:http://jsfiddle.net/rfLffev7/(红色和绿色的 div 代表应该触发功能的按钮)

HTML:

<div id="container">
    <div id="left"></div>
    <div id="track">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
        <img src="">
    </div>
    <div id="right"></div>
</div>

CSS:

#container {
    width: 600px;
    height: 200px;
    margin: 10px auto;
}

#left {
    width: 50px;
    height: 200px;
    float: left;
    background: #500;
}

#track {
    width: 500px;
    height: 200px;
    float: left;
    background: #333;
    white-space: nowrap;
    overflow: hidden;
}

#track img {
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    margin-top: 50px;
    margin-left: 10px;
}

#right {
    width: 50px;
    height: 200px;
    float: left;
    background: #050;
}

Answer 1

我会为此使用绝对定位，因为 CSS 会更简单。对于 JavaScript，这很简单。

在这里，我从“margin-left”中减去 116px 以将#track 向左移动，并将 116px 添加到 #track 以将其移回右侧。我没有在两端添加任何“停止点”，因此理论上您可以无限期地继续滚动。

document.getElementById("left").onclick = function(){
  var currentPlace = parseInt(document.getElementById("track").style.marginLeft) || 0;
  document.getElementById("track").style.marginLeft = (currentPlace - 116) + "px"
}

document.getElementById("right").onclick = function(){
  var currentPlace = parseInt(document.getElementById("track").style.marginLeft) || 0;
  document.getElementById("track").style.marginLeft = (currentPlace + 116) + "px"
}

这是一个工作示例(使用绝对定位):http://jsfiddle.net/rfLffev7/1/

我还添加了一个额外的 :nth-child(even) 类，使图像在移动时更加明显:

#track img:nth-child(even) {
  border: 1px solid #f00;
}