Javascript - перемещение элементов путем нажатия другого элемента

Question

Допустим, у меня есть div с изображениями, однако не все имеют пространство для отображения одновременно, поэтому я использовал свойство CSS white-space: nowrap и overflow: hidden, поэтому элементы не врываются в новые строки или не расширяются над div.

Теперь мне нужен JavaScript-метод, который позволит мне перемещать их влево или вправо, чтобы пользователь мог достичь этих не видимых изображений. Подумайте об этом как о слайдере.

Он должен иметь две кнопки навигации слева и справа, нажимая каждый, изображения перемещаются в определенном направлении. Движение должно быть анимированными (не двигаясь немедленно, вместо этого, они должны двигаться по определенный период, кадр за кадром)

Вот jsfiddle демо: http://jsfiddle.net/rfLffev7/ (красный и зеленый ДИВ представляют собой кнопки, которые должны вызвать функции)

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 это довольно просто.

Здесь я вычитаю 116px из «margin-left», чтобы переместить #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/

Я также добавил дополнительный: п-й ребенок (даже) класс, чтобы сделать его более очевидным, что изображения движутся:

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