Как сфотографировать по клику с помощью jQuery

Question

Я пытаюсь переместить мои изображения влево, используя jQuery. Я использую оператор while для изменения всех изображений. Вот мой код:

<script language="javascript"> 
$(function() { 
$("#leftButton").click(function() { 
    var imglength = $("#content").children("img").length; 
    var iterations = imglength; 
    var lastimg = imglength-1; 
    var nextimg = lastimg-1; 
    var start = 1; 
    var text = ""; 
    document.getElementById("Number").innerHTML="The number of pictures is " + imglength;  
    document.getElementById("Number1").innerHTML="The index of the last image is " + lastimg;  

    while (start < iterations) 
     { 
     var last = $("img:eq('lastimg')").attr("src"); 
     var next = $("img:eq('nextimg')").attr("src"); 
     text += "<br>Iteration: " + imgindex + " and nextimg is:" +nextimg; 
     $("img:eq('lastimg')").attr('src', next); 
     start++; 
     nextimg--; 
     } 
     document.getElementById("Number2").innerHTML = text; 
    }) 
    }) 
</script> 

HTML здесь:

Imgae Сдвиг

сдвиг влево Фотографии

 <p id="Number">Number</p> 
    <p id="Number1">Number</p> 
    <p id="Number2">Number</p> 

    <div id="result"></div> 
    </section> 
    </section> 
<footer> 
    &copy; Matthew King: 2015, Birmingham, AL 35211 
</footer> 
</body> 
</html> 

Answer 1

Возможно, было бы проще просто добавить первое изображение обратно к его родительскому объекту. Этот должен удалить его и добавить обратно в качестве последнего ребенка. В демонстрации каждое изображение имеет границу, чтобы вы могли видеть, что происходит. Я предполагаю, что это то, что вам нужно, но если не сообщите мне.

function slideKittens(){ 
 
    var first = document.querySelector("#kittens > img"); 
 
    first.parentNode.appendChild(first); 
 
} 
 

 
setInterval(slideKittens, 1 * 1000);

#kittens img { 
 
    border: solid 2px black; 
 
    margin: 2px; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    float: left; 
 
}

<div id="kittens" style="overflow: hidden; width:333px; height: 108px"> 
 
    <img src="http://placekitten.com/100/100" style="border-color: black;" /> 
 
    <img src="http://placekitten.com/100/100" style="border-color: red;" /> 
 
    <img src="http://placekitten.com/100/100" style="border-color: green;" /> 
 
    <img src="http://placekitten.com/100/100" style="border-color: blue;" /> 
 
</div>

Answer 2

Проблема заключается в том, что вы не используете переменные правильно.

Линии

var last = $("img:eq('lastimg')").attr("src"); 
var next = $("img:eq('nextimg')").attr("src"); 
$("img:eq('lastimg')").attr('src', next); 

должен быть

var last = $("img:eq('" + lastimg + "')").attr("src"); 
var next = $("img:eq('" + nextimg+ "')").attr("src"); 
$("img:eq('" + lastimg +"')").attr('src', next);