Question

假设我有一个带图像的div，但是并非所有都有空间可以同时显示，所以我使用CSS属性white-space：nowrap和overflow：hidden，所以元素不会分成新行或扩展div。

现在我需要JavaScript技术，允许我向左或向右移动它们，这样用户也可以到达这些不可见的图像。把它想象成一个滑块。

它应该有两个左右导航按钮，按下每个按钮，图像沿特定方向移动。运动应该是动画的（不是立即移动，而是应该逐帧移动）

这是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（偶数）类，使图像更加明显：

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

Answer 2

您可以使用边距移动内部轨道。例如，检查元素的边距值，然后检查图像的大小（或者您想要移动轨道的任何距离），然后将这两个值一起添加，然后将新值应用到轨道。

$('#right').click(function(){
var moveDistance = $('#track').find('img').width()
var moved = $('#track').css('marginLeft');
var moveIt = moveDistance - parseInt(moved)
$('#track').css('marginLeft', -moveIt);
});

我已经用我的意思更新了你的例子。装配绿色按钮以移动1个图像的距离+元素边距的前一个值。

http://jsfiddle.net/rfLffev7/4/

您还需要对您的CSS进行一些更改，以保持其他元素的位置。

#container {
width: 600px;
height: 200px;
margin: 10px auto;
overflow:hidden;
position:relative;
}

#left {
width: 50px;
height: 200px;
left:0;
background: #500;
position:absolute;
z-index:1;
}

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

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

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

#right {
width: 50px;
height: 200px;
background: #050;
position:absolute;
right:0;
}

Javascript - 按另一个元素移动元素

2 个答案: